perf(nuxt): use granular imports for auto-importing composables (#23951)

This commit is contained in:
Daniel Roe 2023-10-30 22:05:02 +01:00 committed by GitHub
parent 27791f4c33
commit d7b1116443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 161 additions and 126 deletions

View File

@ -70,6 +70,11 @@
"target": "packages/nuxt/src/app",
"message": "app should not directly import from modules."
},
{
"from": "packages/nuxt/src/app/**/index.ts",
"target": "packages/nuxt/src",
"message": "should not import from barrel/index files"
},
{
"from": "packages/nitro",
"target": "packages/!(nitro)/**/*",

View File

@ -112,7 +112,7 @@ export default defineNuxtModule({
```ts [plugin.ts]
import { createHead as createClientHead, createServerHead } from '@unhead/vue'
import { defineNuxtPlugin } from '#app'
import { defineNuxtPlugin } from '#imports'
// @ts-ignore
import metaConfig from '#build/meta.config.mjs'

View File

@ -234,7 +234,7 @@ export default defineNuxtModule({
```ts [runtime/plugin.ejs]
import { VueFire, useSSRInitialState } from 'vuefire'
import { defineNuxtPlugin } from '#app'
import { defineNuxtPlugin } from '#imports'
export default defineNuxtPlugin((nuxtApp) => {
const firebaseApp = nuxtApp.$firebaseApp

View File

@ -1,9 +1,10 @@
import type { defineAsyncComponent } from 'vue'
import { createVNode, defineComponent } from 'vue'
import { createError } from '../composables/error'
// @ts-expect-error virtual file
import * as islandComponents from '#build/components.islands.mjs'
import { createError } from '#app/composables/error'
export default defineComponent({
props: {

View File

@ -1,5 +1,5 @@
import { defineComponent, onErrorCaptured, ref } from 'vue'
import { useNuxtApp } from '#app/nuxt'
import { useNuxtApp } from '../nuxt'
export default defineComponent({
emits: {

View File

@ -9,9 +9,9 @@ import type { FetchResponse } from 'ofetch'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
import { getFragmentHTML, getSlotProps } from './utils'
import { useNuxtApp, useRuntimeConfig } from '#app/nuxt'
import { prerenderRoutes, useRequestEvent } from '#app/composables/ssr'
// @ts-expect-error virtual file
import { remoteComponentIslands } from '#build/nuxt.config.mjs'

View File

@ -1,12 +1,15 @@
import type { DefineComponent, MaybeRef, VNode } from 'vue'
import { Suspense, Transition, computed, defineComponent, h, inject, mergeProps, nextTick, onMounted, provide, ref, unref } from 'vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
// eslint-disable-next-line import/no-restricted-paths
import type { PageMeta } from '../../pages/runtime/composables'
import { useRoute } from '../composables/router'
import { useNuxtApp } from '../nuxt'
import { _wrapIf } from './utils'
import { LayoutMetaSymbol, PageRouteSymbol } from './injections'
import type { PageMeta } from '#app'
import { useRoute } from '#app/composables/router'
import { useNuxtApp } from '#app/nuxt'
// @ts-expect-error virtual file
import { useRoute as useVueRouterRoute } from '#build/pages'
// @ts-expect-error virtual file

View File

@ -1,7 +1,7 @@
import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
import { useNuxtApp } from '../nuxt'
import { useRouter } from '../composables/router'
import { isChangingPage } from './utils'
import { useNuxtApp } from '#app/nuxt'
import { useRouter } from '#app/composables/router'
// @ts-expect-error virtual file
import { globalMiddleware } from '#build/middleware'

View File

@ -9,10 +9,10 @@
<script setup>
import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from 'vue'
import { useNuxtApp } from '#app/nuxt'
import { isNuxtError, showError, useError } from '#app/composables/error'
import { useRoute } from '#app/composables/router'
import { PageRouteSymbol } from '#app/components/injections'
import { useNuxtApp } from '../nuxt'
import { isNuxtError, showError, useError } from '../composables/error'
import { useRoute } from '../composables/router'
import { PageRouteSymbol } from '../components/injections'
import AppComponent from '#build/app-component.mjs'
import ErrorComponent from '#build/error-component.mjs'

View File

@ -1,7 +1,7 @@
import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } from 'vue'
import type { Ref, VNode } from 'vue'
import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router'
import { PageRouteSymbol } from '#app/components/injections'
import { PageRouteSymbol } from './injections'
export const RouteProvider = defineComponent({
name: 'RouteProvider',

View File

@ -1,5 +1,5 @@
import destr from 'destr'
import { useNuxtApp } from '#app/nuxt'
import { useNuxtApp } from '../nuxt'
export interface ReloadNuxtAppOptions {
/**

View File

@ -1,5 +1,5 @@
import { useNuxtApp } from '../nuxt'
import type { NuxtPayload } from '#app'
import type { NuxtPayload } from '../nuxt'
/**
* Allows full control of the hydration cycle to set and receive data from the server.

View File

@ -1,7 +1,7 @@
import type { MatcherExport, RouteMatcher } from 'radix3'
import { createMatcherFromExport } from 'radix3'
import { defu } from 'defu'
import { useAppConfig } from '#app'
import { useAppConfig } from '../config'
// @ts-expect-error virtual file
import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
// @ts-expect-error virtual file

View File

@ -4,8 +4,8 @@ import { useHead } from '@unhead/vue'
import { getCurrentInstance } from 'vue'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { getAppManifest, getRouteRules } from '#app/composables/manifest'
import { useRoute } from '#app/composables'
import { useRoute } from './router'
import { getAppManifest, getRouteRules } from './manifest'
// @ts-expect-error virtual import
import { appManifest, payloadExtraction, renderJsonPayloads } from '#build/nuxt.config.mjs'

View File

@ -4,13 +4,14 @@ import type { NavigationFailure, NavigationGuard, RouteLocationNormalized, Route
import { sanitizeStatusCode } from 'h3'
import { hasProtocol, isScriptProtocol, joinURL, parseURL, withQuery } from 'ufo'
// eslint-disable-next-line import/no-restricted-paths
import type { PageMeta } from '../../pages/runtime/composables'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { PageRouteSymbol } from '../components/injections'
import type { NuxtError } from './error'
import { createError, showError } from './error'
import type { PageMeta } from '#app'
import { PageRouteSymbol } from '#app/components/injections'
export const useRouter: typeof _useRouter = () => {
return useNuxtApp()?.$router as Router
}

View File

@ -1,7 +1,7 @@
import { getRequestURL } from 'h3'
import { joinURL } from 'ufo'
import { useRuntimeConfig } from '../nuxt'
import { useRequestEvent } from './ssr'
import { useRuntimeConfig } from '#app'
export function useRequestURL () {
if (import.meta.server) {

View File

@ -1,4 +1,4 @@
import type { CreateOptions } from '#app'
import type { CreateOptions } from './nuxt'
const entry = import.meta.server
? (ctx?: CreateOptions['ssrContext']) => import('#app/entry').then(m => m.default(ctx))

View File

@ -5,8 +5,8 @@ import { createApp, createSSRApp, nextTick } from 'vue'
import '#build/paths.mjs'
import '#build/fetch.mjs'
import type { CreateOptions } from '#app'
import { applyPlugins, createNuxtApp } from '#app/nuxt'
import { applyPlugins, createNuxtApp } from './nuxt'
import type { CreateOptions } from './nuxt'
import '#build/css'
// @ts-expect-error virtual file

View File

@ -1,7 +1,9 @@
/// <reference path="types/augments.d.ts" />
export * from './nuxt'
// eslint-disable-next-line import/no-restricted-paths
export * from './composables/index'
// eslint-disable-next-line import/no-restricted-paths
export * from './components/index'
export * from './config'
export * from './compat/idle-callback'

View File

@ -1,5 +1,5 @@
import { defineNuxtRouteMiddleware } from '#app/composables/router'
import { getRouteRules } from '#app/composables/manifest'
import { defineNuxtRouteMiddleware } from '../composables/router'
import { getRouteRules } from '../composables/manifest'
export default defineNuxtRouteMiddleware(async (to) => {
if (import.meta.server || import.meta.test) { return }

View File

@ -9,14 +9,14 @@ import type { SSRContext, createRenderer } from 'vue-bundle-renderer/runtime'
import type { H3Event } from 'h3'
import type { AppConfig, AppConfigInput, RuntimeConfig } from 'nuxt/schema'
import type { RenderResponse } from 'nitropack'
import type { MergeHead, VueHeadClient } from '@unhead/vue'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtIslandContext } from '../core/runtime/nitro/renderer'
import type { RouteMiddleware } from '../../app'
import type { RouteMiddleware } from '../app/composables/router'
import type { NuxtError } from '../app/composables/error'
import type { AsyncDataRequestStatus } from '../app/composables/asyncData'
import type { NuxtAppManifestMeta } from '#app/composables'
import type { NuxtAppManifestMeta } from '../app/composables/manifest'
const nuxtAppCtx = /* #__PURE__ */ getContext<NuxtApp>('nuxt-app', {
asyncContext: !!process.env.NUXT_ASYNC_CONTEXT && process.server

View File

@ -1,5 +1,7 @@
import type { NuxtAppManifestMeta } from '#app'
import { defineNuxtPlugin, getAppManifest, onNuxtReady } from '#app'
import { defineNuxtPlugin } from '../nuxt'
import { getAppManifest } from '../composables/manifest'
import type { NuxtAppManifestMeta } from '../composables/manifest'
import { onNuxtReady } from '../composables/ready'
// @ts-expect-error virtual file
import { buildAssetsURL } from '#build/paths.mjs'

View File

@ -1,8 +1,8 @@
import { joinURL } from 'ufo'
import type { RouteLocationNormalized } from 'vue-router'
import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
import { useRouter } from '#app/composables/router'
import { reloadNuxtApp } from '#app/composables/chunk'
import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
import { useRouter } from '../composables/router'
import { reloadNuxtApp } from '../composables/chunk'
export default defineNuxtPlugin({
name: 'nuxt:chunk-reload',

View File

@ -1,7 +1,7 @@
import { ref } from 'vue'
import { parseURL } from 'ufo'
import { useHead } from '@unhead/vue'
import { defineNuxtPlugin } from '#app/nuxt'
import { defineNuxtPlugin } from '../nuxt'
export default defineNuxtPlugin({
name: 'nuxt:cross-origin-prefetch',

View File

@ -1,5 +1,5 @@
import { createDebugger } from 'hookable'
import { defineNuxtPlugin } from '#app/nuxt'
import { defineNuxtPlugin } from '../nuxt'
export default defineNuxtPlugin({
name: 'nuxt:debug',

View File

@ -1,9 +1,9 @@
import { parseURL } from 'ufo'
import { defineNuxtPlugin } from '#app/nuxt'
import { loadPayload } from '#app/composables/payload'
import { onNuxtReady } from '#app/composables/ready'
import { useRouter } from '#app/composables/router'
import { getAppManifest } from '#app/composables/manifest'
import { defineNuxtPlugin } from '../nuxt'
import { loadPayload } from '../composables/payload'
import { onNuxtReady } from '../composables/ready'
import { useRouter } from '../composables/router'
import { getAppManifest } from '../composables/manifest'
// @ts-expect-error virtual file
import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'

View File

@ -1,4 +1,4 @@
import { defineNuxtPlugin } from '#app/nuxt'
import { defineNuxtPlugin } from '../nuxt'
export default defineNuxtPlugin({
name: 'nuxt:webpack-preload',

View File

@ -1,5 +1,5 @@
import destr from 'destr'
import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
import { defineNuxtPlugin, useNuxtApp } from '../nuxt'
export default defineNuxtPlugin({
name: 'nuxt:restore-state',

View File

@ -1,8 +1,8 @@
import { reactive, ref, shallowReactive, shallowRef } from 'vue'
import destr from 'destr'
import { definePayloadReviver, getNuxtClientPayload } from '#app/composables/payload'
import { createError } from '#app/composables/error'
import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
import { definePayloadReviver, getNuxtClientPayload } from '../composables/payload'
import { createError } from '../composables/error'
import { defineNuxtPlugin, useNuxtApp } from '../nuxt'
// @ts-expect-error Virtual file.
import { componentIslands } from '#build/nuxt.config.mjs'

View File

@ -1,7 +1,7 @@
import { isReactive, isRef, isShallow, toRaw } from 'vue'
import { definePayloadReducer } from '#app/composables/payload'
import { isNuxtError } from '#app/composables/error'
import { defineNuxtPlugin } from '#app/nuxt'
import { definePayloadReducer } from '../composables/payload'
import { isNuxtError } from '../composables/error'
import { defineNuxtPlugin } from '../nuxt'
// @ts-expect-error Virtual file.
import { componentIslands } from '#build/nuxt.config.mjs'

View File

@ -1,6 +1,6 @@
import { isChangingPage } from '#app/components/utils'
import { useRouter } from '#app/composables/router'
import { defineNuxtPlugin } from '#app/nuxt'
import { isChangingPage } from '../components/utils'
import { useRouter } from '../composables/router'
import { defineNuxtPlugin } from '../nuxt'
export default defineNuxtPlugin((nuxtApp) => {
if (!document.startViewTransition) { return }

View File

@ -285,7 +285,7 @@ export const appConfigTemplate: NuxtTemplate = {
write: true,
getContents: async ({ app, nuxt }) => {
return `
import { updateAppConfig } from '#app'
import { updateAppConfig } from '#app/config'
import { defuFn } from '${await _resolveId('defu')}'
const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}

View File

@ -1,7 +1,6 @@
import { createHead as createClientHead, setHeadInjectionHandler } from '@unhead/vue'
import { renderDOMHead } from '@unhead/dom'
import { defineNuxtPlugin } from '#app/nuxt'
import { useNuxtApp } from '#app'
import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
// @ts-expect-error virtual file
import unheadPlugins from '#build/unhead-plugins.mjs'

View File

@ -12,70 +12,89 @@ const commonPresets: InlinePreset[] = [
})
]
const appPreset = defineUnimportPreset({
from: '#app',
imports: [
'useAsyncData',
'useLazyAsyncData',
'useNuxtData',
'refreshNuxtData',
'clearNuxtData',
'defineNuxtComponent',
'useNuxtApp',
'defineNuxtPlugin',
'definePayloadPlugin',
'reloadNuxtApp',
'useRuntimeConfig',
'useState',
'clearNuxtState',
'useFetch',
'useLazyFetch',
'useCookie',
'useRequestHeaders',
'useRequestEvent',
'useRequestFetch',
'useRequestURL',
'setResponseStatus',
'setPageLayout',
'prerenderRoutes',
'onNuxtReady',
'useRouter',
'useRoute',
'defineNuxtRouteMiddleware',
'navigateTo',
'abortNavigation',
'addRouteMiddleware',
'showError',
'clearError',
'isNuxtError',
'useError',
'createError',
'defineNuxtLink',
'useAppConfig',
'updateAppConfig',
'defineAppConfig',
'preloadComponents',
'preloadRouteComponents',
'prefetchComponents',
'loadPayload',
'preloadPayload',
'isPrerendered',
'getAppManifest',
'getRouteRules',
'definePayloadReducer',
'definePayloadReviver',
'requestIdleCallback',
'cancelIdleCallback'
]
})
const granularAppPresets: InlinePreset[] = [
{
from: '#app/components/nuxt-link',
imports: ['defineNuxtLink']
},
{
imports: ['useNuxtApp', 'defineNuxtPlugin', 'definePayloadPlugin', 'useRuntimeConfig', 'defineAppConfig'],
from: '#app/nuxt'
},
{
imports: ['requestIdleCallback', 'cancelIdleCallback'],
from: '#app/compat/idle-callback'
},
{
imports: ['useAppConfig', 'updateAppConfig'],
from: '#app/config'
},
{
imports: ['defineNuxtComponent'],
from: '#app/composables/component'
},
{
imports: ['useAsyncData', 'useLazyAsyncData', 'useNuxtData', 'refreshNuxtData', 'clearNuxtData'],
from: '#app/composables/asyncData'
},
{
imports: ['useHydration'],
from: '#app/composables/hydrate'
},
{
imports: ['useState', 'clearNuxtState'],
from: '#app/composables/state'
},
{
imports: ['clearError', 'createError', 'isNuxtError', 'showError', 'useError'],
from: '#app/composables/error'
},
{
imports: ['useFetch', 'useLazyFetch'],
from: '#app/composables/fetch'
},
{
imports: ['useCookie'],
from: '#app/composables/cookie'
},
{
imports: ['prerenderRoutes', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
from: '#app/composables/ssr'
},
{
imports: ['onNuxtReady'],
from: '#app/composables/ready'
},
{
imports: ['preloadComponents', 'prefetchComponents', 'preloadRouteComponents'],
from: '#app/composables/preload'
},
{
imports: ['abortNavigation', 'addRouteMiddleware', 'defineNuxtRouteMiddleware', 'setPageLayout', 'navigateTo', 'useRoute', 'useRouter'],
from: '#app/composables/router'
},
{
imports: ['isPrerendered', 'loadPayload', 'preloadPayload', 'definePayloadReducer', 'definePayloadReviver'],
from: '#app/composables/payload'
},
{
imports: ['getAppManifest', 'getRouteRules'],
from: '#app/composables/manifest'
},
{
imports: ['reloadNuxtApp'],
from: '#app/composables/chunk'
},
{
imports: ['useRequestURL'],
from: '#app/composables/url'
}
]
// vue-router
// This is a separate preset as we'll swap these out for import from `vue-router` itself in `pages` module
const routerPreset = defineUnimportPreset({
from: '#app',
imports: [
'onBeforeRouteLeave',
'onBeforeRouteUpdate'
]
imports: ['onBeforeRouteLeave', 'onBeforeRouteUpdate'],
from: '#app/composables/router'
})
// vue
@ -180,7 +199,7 @@ const vueTypesPreset = defineUnimportPreset({
export const defaultPresets: InlinePreset[] = [
...commonPresets,
appPreset,
...granularAppPresets,
routerPreset,
vuePreset,
vueTypesPreset

View File

@ -182,7 +182,7 @@ export default defineNuxtModule({
// Add vue-router route guard imports
nuxt.hook('imports:sources', (sources) => {
const routerImports = sources.find(s => s.from === '#app' && s.imports.includes('onBeforeRouteLeave'))
const routerImports = sources.find(s => s.from === '#app/composables/router' && s.imports.includes('onBeforeRouteLeave'))
if (routerImports) {
routerImports.from = '#vue-router'
}

View File

@ -3,7 +3,7 @@ import { getCurrentInstance } from 'vue'
import type { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouteRecordRedirectOption } from '#vue-router'
import { useRoute } from 'vue-router'
import type { NitroRouteConfig } from 'nitropack'
import type { NuxtError } from '#app'
import type { NuxtError } from '#app/composables/error'
export interface PageMeta {
[key: string]: unknown

View File

@ -11,7 +11,10 @@ import {
import { createError } from 'h3'
import { isEqual, withoutBase } from 'ufo'
import type { PageMeta, Plugin, RouteMiddleware } from '../../../app/index'
import type { PageMeta } from '../composables'
import type { RouteMiddleware } from '#app/composables/router'
import type { Plugin } from '#app/nuxt'
import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
import { clearError, showError, useError } from '#app/composables/error'
import { navigateTo } from '#app/composables/router'

View File

@ -68,7 +68,7 @@ describe('imports:nuxt', () => {
continue
}
it(`should register ${name} globally`, () => {
expect(defaultPresets.flatMap(a => a.from === '#app' ? a.imports : [])).to.include(name)
expect(defaultPresets.flatMap(a => a.from.startsWith('#app/') ? a.imports : [])).to.include(name)
})
}
} catch (e) {