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

Author: wattanx

packages/bridge/src/app.ts

@@ -11,7 +11,7 @@ export async function setupAppBridge (_options: any) {
   const nuxt = useNuxt()
 
   // Setup aliases
-  nuxt.options.alias['#app'] = resolve(distDir, 'runtime/index')
+  nuxt.options.alias['#app'] = resolve(distDir, 'runtime')
   nuxt.options.alias['nuxt3/app'] = nuxt.options.alias['#app']
   nuxt.options.alias['nuxt/app'] = nuxt.options.alias['#app']
   nuxt.options.alias['#build'] = nuxt.options.buildDir

packages/bridge/src/imports/presets.ts

@@ -10,43 +10,44 @@ export const commonPresets: InlinePreset[] = [
   }),
   // vue-demi (mocked)
   defineUnimportPreset({
-    from: '#app',
+    from: '#app/app',
     imports: [
       'isVue2',
       'isVue3'
     ]
   })
 ]
 
-export const appPreset = defineUnimportPreset({
-  from: '#app',
-  imports: [
-    'useLazyAsyncData',
-    'refreshNuxtData',
-    'defineNuxtComponent',
-    'useNuxtApp',
-    'defineNuxtPlugin',
-    'useRuntimeConfig',
-    'useState',
-    'useLazyFetch',
-    'useCookie',
-    'useRequestHeaders',
-    'useRequestEvent',
-    'useRouter',
-    'useRoute',
-    'defineNuxtRouteMiddleware',
-    'navigateTo',
-    'abortNavigation',
-    'addRouteMiddleware',
-    'useNuxt2Meta',
-    'clearError',
-    'createError',
-    'isNuxtError',
-    'throwError',
-    'showError',
-    'useError'
-  ]
-})
+const granularAppPresets: InlinePreset[] = [
+  {
+    imports: ['defineNuxtComponent', 'setNuxtAppInstance', 'useNuxtApp', 'defineNuxtPlugin'],
+    from: '#app/app'
+  },
+  {
+    imports: ['useRuntimeConfig', 'useNuxt2Meta', 'useRoute', 'useRouter', 'useState', 'abortNavigation', 'addRouteMiddleware', 'defineNuxtRouteMiddleware', 'navigateTo'],
+    from: '#app/composables'
+  },
+  {
+    imports: ['useLazyAsyncData', 'refreshNuxtData'],
+    from: '#app/asyncData'
+  },
+  {
+    imports: ['clearError', 'createError', 'isNuxtError', 'showError', 'useError', 'throwError'],
+    from: '#app/error'
+  },
+  {
+    imports: ['useLazyFetch'],
+    from: '#app/fetch'
+  },
+  {
+    imports: ['useCookie'],
+    from: '#app/cookie'
+  },
+  {
+    imports: ['useRequestHeaders', 'useRequestEvent'],
+    from: '#app/ssr'
+  }
+]
 
 export const vueKeys: Array<keyof typeof import('vue')> = [
   // Lifecycle
@@ -125,7 +126,7 @@ const vueRouterPreset = defineUnimportPreset({
 
 export const defaultPresets = [
   ...commonPresets,
-  appPreset,
+  ...granularAppPresets,
   vueRouterPreset,
   vuePreset
 ]

packages/bridge/src/runtime/app.plugin.mjs

@@ -1,6 +1,6 @@
 import Vue, { version } from 'vue'
 import { createHooks } from 'hookable'
-import { setNuxtAppInstance } from '#app'
+import { setNuxtAppInstance } from '#app/app'
 import { globalMiddleware } from '#build/global-middleware'
 
 // Reshape payload to match key `useLazyAsyncData` expects

packages/bridge/src/runtime/capi.plugin.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const _originalSetup = nuxtApp.nuxt2Context.app.setup

packages/bridge/src/runtime/nitro-bridge.server.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 const vueMetaRenderer = (nuxt) => {
   const meta = nuxt.ssrContext.meta.inject({

playground/middleware/redirect.ts

@@ -1,4 +1,4 @@
-import { defineNuxtRouteMiddleware, abortNavigation } from '#app'
+import { defineNuxtRouteMiddleware, abortNavigation } from '#imports'
 
 export default defineNuxtRouteMiddleware((to) => {
   if ('abort' in to.query) {

playground/plugins/setup.js

@@ -1,6 +1,6 @@
 import { onGlobalSetup, ref } from '@nuxtjs/composition-api'
 
-import { defineNuxtPlugin, addRouteMiddleware, navigateTo } from '#app'
+import { defineNuxtPlugin, addRouteMiddleware, navigateTo } from '#imports'
 
 export default defineNuxtPlugin(() => {
   const globalsetup = ref('🚧')