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

[sun0day]

Description

fix #14145

refs rollup/rollup#4952

After this PR, vite can treeshaken following dynamic imports when injecting __vitePreload:

 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
  })

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[Dunqing]

The below case cannot be supported.

import('./deps.js')
  .then({ a } => {})

You need to add \s* before .then

IMO, using regexp to handle this might break many edge-case

[sun0day]

Yeah, regexp can hardly cover all the edge-cases, but it seems there's no better way to support dynamic import treeshaking within current logic. Parsing the ast can completely handle this issue but it's too expensive.

IMO, we could support the common usages of dynamic import for now, and then patch the related issues in the future.

[bluwy]

IIUC this PR transforms dynamic imports with __vitePreload to still preserve the const { ... } = await import('...') syntax temporarily so it still works? It's a bit hard to see how it transforms without more comments or snapshots 😬

But I think the regex and implementation is fairly impressive. I'd lean to a more robust alternative still, but it's also harder. Ideally if __vitePreload is only injected in the render phase, but that makes the preload code hard to be chunked. So perhaps this is good enough for now.

[sun0day]

IIUC this PR transforms dynamic imports with __vitePreload to still preserve the const { ... } = await import('...') syntax temporarily so it still works?

Yeah, that's what this pr mainly does. The regexp contains three sub-regexps related to three dynamic import formats, e.g:

• const {foo} = await import('foo')
• (await import('foo')).foo
• import('foo').then(({foo})=>{})

After injecting __vitePreload, they will be transformed to something like:

• const {foo} = await __vitePreload(async () => { const {foo} = await import('foo');return {foo}}, ...)
• __vitePreload(async () => { const {foo} = await import('foo');return { foo }},...).then(({foo})=>{})
• __vitePreload(async () => { const __vite_temp__ = (await import('foo')).foo; return { foo: __vite_temp__ }},...)).foo

[bluwy]

I'm open to trying this approach in the beta to see if it works, but I'll see what the others think about it too.

[bluwy]

Does it make sense to make this:

const names = match[5].match(/\.([^.?]+)/)?.[1] || ''
... = { declarations: `const {${names}}`, names: : `{ ${names} }`  }

The regex is borrowed from line 386, which maybe could be simplified and extracted.

This way all cases are consistently typed?

[sun0day]

Yeah, that would be better 👍