fix(build-import-analysis): treeshaken dynamic import when injecting preload

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -45,6 +45,9 @@ const dynamicImportPrefixRE = /import\s*\(/
 const optimizedDepChunkRE = /\/chunk-[A-Z\d]{8}\.js/
 const optimizedDepDynamicRE = /-[A-Z\d]{8}\.js/
 
+const dynamicImportTreeshakenRE =
+  /(\b(const|let|var)\s+(\{[^}.]+\})\s*=\s*await\s+import\([^)]+\))|(\(\s*await\s+import\([^)]+\)\s*\)(\??\.[^;[\s]+)+)|\bimport\([^)]+\)(\s*\.then\([^{]*?\(\s*\{([^}.]+)\})/g
+
 function toRelativePath(filename: string, importer: string) {
   const relPath = path.relative(path.dirname(importer), filename)
   return relPath[0] === '.' ? relPath : `./${relPath}`
@@ -284,6 +287,61 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
         return [url, resolved.id]
       }
 
+      // when wrapping dynamic imports with a preload helper, Rollup is unable to analyze the
+      // accessed variables for treeshaking. This below tries to match common accessed syntax
+      // to "copy" it over to the dynamic import wrapped by the preload helper.
+      const dynamicImports: Record<
+        number,
+        { declaration?: string; names?: string; chains?: string }
+      > = {}
+
+      if (insertPreload) {
+        let match
+        while ((match = dynamicImportTreeshakenRE.exec(source))) {
+          /* handle `const {foo} = await import('foo')`
+           *
+           * match[1]: `const {foo} = await import('foo')`
+           * match[2]: `const`
+           * match[3]: `{foo}`
+           * import end: `const {foo} = await import('foo')_`
+           *                                               ^
+           */
+          if (match[1]) {
+            dynamicImports[dynamicImportTreeshakenRE.lastIndex] = {
+              declaration: `${match[2]} ${match[3]}`,
+              names: match[3]?.trim(),
+            }
+            continue
+          }
+
+          /* handle `(await import('foo')).foo`
+           *
+           * match[4]: `(await import('foo')).foo`
+           * match[5]: `.foo`
+           * import end: `(await import('foo'))`
+           *                                  ^
+           */
+          if (match[4]) {
+            dynamicImports[
+              dynamicImportTreeshakenRE.lastIndex - match[5]?.length - 1
+            ] = { chains: match[5] }
+            continue
+          }
+
+          /* handle `import('foo').then(({foo})=>{})`
+           *
+           * match[6]: `.then(({foo}`
+           * match[7]: `foo`
+           * import end: `import('foo').`
+           *                           ^
+           */
+          const names = match[7]?.trim()
+          dynamicImports[
+            dynamicImportTreeshakenRE.lastIndex - match[6]?.length
+          ] = { declaration: `const {${names}}`, names: `{ ${names} }` }
+        }
+      }
+
       let s: MagicString | undefined
       const str = () => s || (s = new MagicString(source))
       let needPreloadHelper = false
@@ -308,7 +366,36 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
         if (isDynamicImport && insertPreload) {
           needPreloadHelper = true
-          str().prependLeft(expStart, `${preloadMethod}(() => `)
+          const { declaration, names, chains } = dynamicImports[expEnd] || {}
+          if (names) {
+            /* transform `const {foo} = await import('foo')`
+             * to `const {foo} = await __vitePreload(async () => { const {foo} = await import('foo');return {foo}}, ...)`
+             *
+             * transform `import('foo').then(({foo})=>{})`
+             * to `__vitePreload(async () => { const {foo} = await import('foo');return { foo }},...).then(({foo})=>{})`
+             */
+            str().prependLeft(
+              expStart,
+              `${preloadMethod}(async () => { ${declaration} = await `,
+            )
+            str().appendRight(expEnd, `;return ${names}}`)
+          } else if (chains) {
+            /* transform `(await import('foo')).foo`
+             * to `__vitePreload(async () => { const __vite_temp__ = (await import('foo')).foo; return { foo: __vite_temp__ }},...)).foo`
+             */
+            const name = chains.match(/\.([^.?]+)/)?.[1] || ''
+            str().prependLeft(
+              expStart,
+              `${preloadMethod}(async () => { const __vite_temp__ = (await `,
+            )
+            str().appendRight(
+              expEnd,
+              `).${name}; return { ${name}: __vite_temp__ }}`,
+            )
+          } else {
+            str().prependLeft(expStart, `${preloadMethod}(() => `)
+          }
+
           str().appendRight(
             expEnd,
             `,${isModernFlag}?"${preloadMarker}":void 0${

playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -1,5 +1,13 @@
 import { expect, test } from 'vitest'
-import { getColor, isBuild, page, serverLogs, untilUpdated } from '~utils'
+import {
+  browserLogs,
+  findAssetFile,
+  getColor,
+  isBuild,
+  page,
+  serverLogs,
+  untilUpdated,
+} from '~utils'
 
 test('should load literal dynamic import', async () => {
   await page.click('.baz')
@@ -162,3 +170,21 @@ test.runIf(isBuild)(
     )
   },
 )
+
+test('dynamic import treeshaken log', async () => {
+  const log = browserLogs.join('\n')
+  expect(log).toContain('treeshaken foo')
+  expect(log).toContain('treeshaken bar')
+  expect(log).toContain('treeshaken baz1')
+  expect(log).toContain('treeshaken baz2')
+  expect(log).toContain('treeshaken baz3')
+  expect(log).toContain('treeshaken baz4')
+  expect(log).toContain('treeshaken baz5')
+  expect(log).toContain('treeshaken default')
+
+  expect(log).not.toContain('treeshaken removed')
+})
+
+test.runIf(isBuild)('dynamic import treeshaken file', async () => {
+  expect(findAssetFile(/treeshaken.+\.js$/)).not.toContain('treeshaken removed')
+})

playground/dynamic-import/nested/index.js

@@ -130,5 +130,28 @@ import(`../nested/${base}.js`).then((mod) => {
 import(`../nested/nested/${base}.js`).then((mod) => {
   text('.dynamic-import-nested-self', mod.self)
 })
+;(async function () {
+  const { foo } = await import('./treeshaken/treeshaken.js')
+  const { bar, default: tree } = await import('./treeshaken/treeshaken.js')
+  const baz1 = (await import('./treeshaken/treeshaken.js')).baz1
+  const baz2 = (await import('./treeshaken/treeshaken.js')).baz2.log
+  const baz3 = (await import('./treeshaken/treeshaken.js')).baz3?.log
+  const baz4 = await import('./treeshaken/treeshaken.js').then(
+    ({ baz4 }) => baz4,
+  )
+  const baz5 = await import('./treeshaken/treeshaken.js').then(function ({
+    baz5,
+  }) {
+    return baz5
+  })
+  foo()
+  bar()
+  tree()
+  baz1()
+  baz2()
+  baz3()
+  baz4()
+  baz5()
+})()
 
 console.log('index.js')

playground/dynamic-import/nested/treeshaken/treeshaken.js

@@ -0,0 +1,31 @@
+export const foo = () => {
+  console.log('treeshaken foo')
+}
+export const bar = () => {
+  console.log('treeshaken bar')
+}
+export const baz1 = () => {
+  console.log('treeshaken baz1')
+}
+export const baz2 = {
+  log: () => {
+    console.log('treeshaken baz2')
+  },
+}
+export const baz3 = {
+  log: () => {
+    console.log('treeshaken baz3')
+  },
+}
+export const baz4 = () => {
+  console.log('treeshaken baz4')
+}
+export const baz5 = () => {
+  console.log('treeshaken baz5')
+}
+export const removed = () => {
+  console.log('treeshaken removed')
+}
+export default () => {
+  console.log('treeshaken default')
+}