perf(nuxt): don't include side-effects from #components (#19008)

packages/nuxt/src/components/templates.ts

@@ -68,11 +68,11 @@ export const componentsTemplate: NuxtTemplate<ComponentsTemplateContext> = {
         const identifier = `__nuxt_component_${num}`
         imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }]))
         imports.add(genImport(c.filePath, [{ name: c.export, as: identifier }]))
-        definitions.push(`export const ${c.pascalName} =  /*#__PURE__*/  createClientOnly(${identifier})`)
+        definitions.push(`export const ${c.pascalName} = /* #__PURE__ */ createClientOnly(${identifier})`)
       } else {
         definitions.push(genExport(c.filePath, [{ name: c.export, as: c.pascalName }]))
       }
-      definitions.push(`export const Lazy${c.pascalName} = defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${isClient ? `createClientOnly(${exp})` : exp}))`)
+      definitions.push(`export const Lazy${c.pascalName} = /* #__PURE__ */ defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${isClient ? `createClientOnly(${exp})` : exp}))`)
       return definitions
     })
     return [
@@ -96,7 +96,7 @@ export const componentsIslandsTemplate: NuxtTemplate<ComponentsTemplateContext>
       (c) => {
         const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
         const comment = createImportMagicComments(c)
-        return `export const ${c.pascalName} = defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`
+        return `export const ${c.pascalName} = /* #__PURE__ */ defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`
       }
     ).join('\n')
   }

packages/vite/package.json

@@ -46,6 +46,7 @@
     "postcss-url": "^10.1.3",
     "rollup": "^3.15.0",
     "rollup-plugin-visualizer": "^5.9.0",
+    "strip-literal": "^1.0.1",
     "ufo": "^1.0.1",
     "unplugin": "^1.1.0",
     "vite": "~4.1.1",

packages/vite/src/client.ts

@@ -15,6 +15,7 @@ import { chunkErrorPlugin } from './plugins/chunk-error'
 import type { ViteBuildContext, ViteOptions } from './vite'
 import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
 import { runtimePathsPlugin } from './plugins/paths'
+import { pureAnnotationsPlugin } from './plugins/pure-annotations'
 import { viteNodePlugin } from './vite-node'
 
 export async function buildClient (ctx: ViteBuildContext) {
@@ -69,7 +70,11 @@ export async function buildClient (ctx: ViteBuildContext) {
       runtimePathsPlugin({
         sourcemap: ctx.nuxt.options.sourcemap.client
       }),
-      viteNodePlugin(ctx)
+      viteNodePlugin(ctx),
+      pureAnnotationsPlugin.vite({
+        sourcemap: ctx.nuxt.options.sourcemap.client,
+        functions: ['defineComponent', 'defineAsyncComponent', 'defineNuxtLink', 'createClientOnly']
+      })
     ],
     appType: 'custom',
     server: {

packages/vite/src/plugins/pure-annotations.ts

@@ -0,0 +1,52 @@
+import { pathToFileURL } from 'node:url'
+import MagicString from 'magic-string'
+import { parseQuery, parseURL } from 'ufo'
+import { createUnplugin } from 'unplugin'
+import { stripLiteral } from 'strip-literal'
+
+export interface PureAnnotationsOptions {
+  sourcemap: boolean
+  functions: string[]
+}
+
+export const pureAnnotationsPlugin = createUnplugin((options: PureAnnotationsOptions) => {
+  const FUNCTION_RE = new RegExp(`(?<!\\/\\* #__PURE__ \\*\\/ )\\b(${options.functions.join('|')})\\s*\\(`, 'g')
+  const FUNCTION_RE_SINGLE = new RegExp(`(?<!\\/\\* #__PURE__ \\*\\/ )\\b(${options.functions.join('|')})\\s*\\(`)
+  return {
+    name: 'nuxt:pure-annotations',
+    enforce: 'post',
+    transformInclude (id) {
+      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+      const { type } = parseQuery(search)
+
+      // vue files
+      if (pathname.endsWith('.vue') && (type === 'script' || !search)) {
+        return true
+      }
+
+      // js files
+      if (pathname.match(/\.((c|m)?j|t)sx?$/g)) {
+        return true
+      }
+    },
+    transform (code, id) {
+      if (!FUNCTION_RE_SINGLE.test(code)) { return }
+
+      const s = new MagicString(code)
+      const strippedCode = stripLiteral(code)
+
+      for (const match of strippedCode.matchAll(FUNCTION_RE)) {
+        s.overwrite(match.index!, match.index! + match[0].length, '/* #__PURE__ */ ' + match[0])
+      }
+
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: options.sourcemap
+            ? s.generateMap({ source: id, includeContent: true })
+            : undefined
+        }
+      }
+    }
+  }
+})

packages/vite/src/plugins/ssr-styles.ts

@@ -22,6 +22,20 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
 
   return {
     name: 'ssr-styles',
+    resolveId: {
+      order: 'pre',
+      async handler (id, importer, options) {
+        if (!id.endsWith('.vue')) { return }
+
+        const res = await this.resolve(id, importer, { ...options, skipSelf: true })
+        if (res) {
+          return {
+            ...res,
+            moduleSideEffects: false
+          }
+        }
+      }
+    },
     generateBundle (outputOptions) {
       const emitted: Record<string, string> = {}
       for (const file in cssMap) {

packages/vite/src/server.ts

@@ -8,6 +8,7 @@ import type { ViteBuildContext, ViteOptions } from './vite'
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { initViteNodeServer } from './vite-node'
 import { ssrStylesPlugin } from './plugins/ssr-styles'
+import { pureAnnotationsPlugin } from './plugins/pure-annotations'
 import { writeManifest } from './manifest'
 import { transpile } from './utils/transpile'
 
@@ -110,7 +111,11 @@ export async function buildServer (ctx: ViteBuildContext) {
     plugins: [
       cacheDirPlugin(ctx.nuxt.options.rootDir, 'server'),
       vuePlugin(ctx.config.vue),
-      viteJsxPlugin(ctx.config.vueJsx)
+      viteJsxPlugin(ctx.config.vueJsx),
+      pureAnnotationsPlugin.vite({
+        sourcemap: ctx.nuxt.options.sourcemap.server,
+        functions: ['defineComponent', 'defineAsyncComponent', 'defineNuxtLink', 'createClientOnly']
+      })
     ]
   } as ViteOptions)
 

pnpm-lock.yaml

@@ -614,6 +614,7 @@ importers:
       postcss-url: ^10.1.3
       rollup: ^3.15.0
       rollup-plugin-visualizer: ^5.9.0
+      strip-literal: ^1.0.1
       ufo: ^1.0.1
       unbuild: ^1.1.1
       unplugin: ^1.1.0
@@ -650,6 +651,7 @@ importers:
       postcss-url: 10.1.3_postcss@8.4.21
       rollup: 3.15.0
       rollup-plugin-visualizer: 5.9.0_rollup@3.15.0
+      strip-literal: 1.0.1
       ufo: 1.0.1
       unplugin: 1.1.0
       vite: 4.1.1

test/bundle.test.ts

@@ -29,7 +29,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
     expect(stats.client.totalBytes).toBeLessThan(108000)
     expect(stats.client.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
       [
-        "_nuxt/app.js",
+        "_nuxt/_plugin-vue_export-helper.js",
         "_nuxt/entry.js",
         "_nuxt/error-404.js",
         "_nuxt/error-500.js",
@@ -40,7 +40,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(stats.server.totalBytes).toBeLessThan(90200)
+    expect(stats.server.totalBytes).toBeLessThan(92000)
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(modules.totalBytes).toBeLessThan(2700000)

test/fixtures/minimal/app.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import { componentNames } from '#components'
+console.log(componentNames)
+</script>
+
 <template>
   <div>Hello World!</div>
 </template>