fix(build): allow dynamic import treeshaking when injecting preload

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

@@ -46,6 +46,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\([^)]+\)(\.then\([^{]*\{([^}]+)\})/g
+
 function toRelativePath(filename: string, importer: string) {
   const relPath = path.relative(path.dirname(importer), filename)
   return relPath[0] === '.' ? relPath : `./${relPath}`
@@ -285,6 +288,39 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
         return [url, resolved.id]
       }
 
+      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')`
+          if (match[1]) {
+            dynamicImports[dynamicImportTreeshakenRE.lastIndex] = {
+              declaration: `${match[2]} ${match[3]}`,
+              names: match[3]?.trim(),
+            }
+            continue
+          }
+
+          // handle `(await import('foo')).foo`
+          if (match[4]) {
+            dynamicImports[
+              dynamicImportTreeshakenRE.lastIndex - match[5]?.length - 1
+            ] = { chains: match[5] }
+            continue
+          }
+
+          // handle `import('foo').then(({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
@@ -309,7 +345,24 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
         if (isDynamicImport && insertPreload) {
           needPreloadHelper = true
-          str().prependLeft(expStart, `${preloadMethod}(() => `)
+          const { declaration, names, chains } = dynamicImports[expEnd] || {}
+          if (names) {
+            str().prependLeft(
+              expStart,
+              `${preloadMethod}(async () => { ${declaration} = await `,
+            )
+            str().appendRight(expEnd, `;return ${names}}`)
+          } else if (chains) {
+            const name = chains.match(/\.([^.?]+)/)?.[1] || ''
+            str().prependLeft(
+              expStart,
+              `${preloadMethod}(async () => { const ${name} = (await `,
+            )
+            str().appendRight(expEnd, `).${name}; return { ${name} }}`)
+          } 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')
+}