fix(build): handle preload treeshaking for commas (#17472)

Author: bluwy

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

@@ -42,7 +42,7 @@ const preloadMarkerRE = new RegExp(preloadMarker, 'g')
 const dynamicImportPrefixRE = /import\s*\(/
 
 const dynamicImportTreeshakenRE =
-  /(\b(const|let|var)\s+(\{[^}.]+\})\s*=\s*await\s+import\([^)]+\))|(\(\s*await\s+import\([^)]+\)\s*\)(\??\.[^;[\s]+)+)|\bimport\([^)]+\)(\s*\.then\([^{]*?\(\s*\{([^}.]+)\})/g
+  /((?:\bconst\s+|\blet\s+|\bvar\s+|,\s*)(\{[^}.]+\})\s*=\s*await\s+import\([^)]+\))|(\(\s*await\s+import\([^)]+\)\s*\)(\??\.[\w$]+))|\bimport\([^)]+\)(\s*\.then\([^{]*?\(\s*\{([^}.]+)\})/g
 
 function toRelativePath(filename: string, importer: string) {
   const relPath = path.posix.relative(path.posix.dirname(importer), filename)
@@ -252,48 +252,47 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           /* handle `const {foo} = await import('foo')`
            *
            * match[1]: `const {foo} = await import('foo')`
-           * match[2]: `const`
-           * match[3]: `{foo}`
+           * match[2]: `{foo}`
            * import end: `const {foo} = await import('foo')_`
            *                                               ^
            */
           if (match[1]) {
             dynamicImports[dynamicImportTreeshakenRE.lastIndex] = {
-              declaration: `${match[2]} ${match[3]}`,
-              names: match[3]?.trim(),
+              declaration: `const ${match[2]}`,
+              names: match[2]?.trim(),
             }
             continue
           }
 
           /* handle `(await import('foo')).foo`
            *
-           * match[4]: `(await import('foo')).foo`
-           * match[5]: `.foo`
+           * match[3]: `(await import('foo')).foo`
+           * match[4]: `.foo`
            * import end: `(await import('foo'))`
            *                                  ^
            */
-          if (match[4]) {
-            let names = match[5].match(/\.([^.?]+)/)?.[1] || ''
+          if (match[3]) {
+            let names = match[4].match(/\.([^.?]+)/)?.[1] || ''
             // avoid `default` keyword error
             if (names === 'default') {
               names = 'default: __vite_default__'
             }
             dynamicImports[
-              dynamicImportTreeshakenRE.lastIndex - match[5]?.length - 1
+              dynamicImportTreeshakenRE.lastIndex - match[4]?.length - 1
             ] = { declaration: `const {${names}}`, names: `{ ${names} }` }
             continue
           }
 
           /* handle `import('foo').then(({foo})=>{})`
            *
-           * match[6]: `.then(({foo}`
-           * match[7]: `foo`
+           * match[5]: `.then(({foo}`
+           * match[6]: `foo`
            * import end: `import('foo').`
            *                           ^
            */
-          const names = match[7]?.trim()
+          const names = match[6]?.trim()
           dynamicImports[
-            dynamicImportTreeshakenRE.lastIndex - match[6]?.length
+            dynamicImportTreeshakenRE.lastIndex - match[5]?.length
           ] = { declaration: `const {${names}}`, names: `{ ${names} }` }
         }
       }

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

@@ -193,6 +193,12 @@ test('dynamic import treeshaken log', async () => {
   expect(log).not.toContain('treeshaken removed')
 })
 
+test('dynamic import syntax parsing', async () => {
+  const log = browserLogs.join('\n')
+  expect(log).toContain('treeshaken syntax foo')
+  expect(log).toContain('treeshaken syntax default')
+})
+
 test.runIf(isBuild)('dynamic import treeshaken file', async () => {
   expect(findAssetFile(/treeshaken.+\.js$/)).not.toContain('treeshaken removed')
 })

playground/dynamic-import/nested/index.js

@@ -138,25 +138,43 @@ import(`../nested/nested/${base}.js`).then((mod) => {
 ;(async function () {
   const { foo } = await import('./treeshaken/treeshaken.js')
   const { bar, default: tree } = await import('./treeshaken/treeshaken.js')
+  const default2 = (await import('./treeshaken/treeshaken.js')).default
   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
-  })
+      baz5,
+    }) {
+      return baz5
+    }),
+    { baz6 } = await import('./treeshaken/treeshaken.js')
   foo()
   bar()
   tree()
+  ;(await import('./treeshaken/treeshaken.js')).default()
+  default2()
   baz1()
   baz2()
   baz3()
   baz4()
   baz5()
+  baz6()
+})()
+// Test syntax parsing only
+;(async function () {
+  const default1 = await import('./treeshaken/syntax.js').then(
+    (mod) => mod.default,
+  )
+  const default2 = (await import('./treeshaken/syntax.js')).default,
+    other = () => {}
+  const foo = await import('./treeshaken/syntax.js').then((mod) => mod.foo)
+  default1()
+  default2()
+  other()
+  foo()
 })()
 
 import(`../nested/static.js`).then((mod) => {

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

@@ -0,0 +1,6 @@
+export const foo = () => {
+  console.log('treeshaken syntax foo')
+}
+export default () => {
+  console.log('treeshaken syntax default')
+}

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

@@ -23,6 +23,9 @@ export const baz4 = () => {
 export const baz5 = () => {
   console.log('treeshaken baz5')
 }
+export const baz6 = () => {
+  console.log('treeshaken baz6')
+}
 export const removed = () => {
   console.log('treeshaken removed')
 }