fix(build): allow dynamic import treeshaking 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.

[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]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on efd904b: Open

suite	result	latest scheduled
histoire	✅ success	❌ failure
nuxt	❌ failure	❌ failure
sveltekit	✅ success	❌ failure
vite-plugin-react-pages	❌ failure	❌ failure
vitest	❌ failure	❌ failure

✅ analogjs, astro, ladle, laravel, marko, previewjs, quasar, qwik, rakkas, remix, unocss, vike, vite-plugin-pwa, vite-plugin-react, vite-plugin-react-swc, vite-plugin-svelte, vite-plugin-vue, vite-setup-catalogue, vitepress

[patak-dev]

This is a very smart trick 👀
Probably too magical but I can't think of a better way to do this at this point. Maybe we should rethink the way preload works in general to do a simpler scheme. Let's add it to the beta so we can test before the release.

[IanVS]

Upgrading to vite 5.3.0-beta.1 has broken a storybook build, and I wonder if it's because of this PR. Is it possible that this can cause an invalid shorthand object? In my case, I have let axe=(await import('axe-core')).default, and I'm getting an error during build: RollupError: Cannot use a reserved word as a shorthand property

Is it possible that this is being transformed to {default}?

[bluwy]

I think so! We may need to handle this like on line 278. Seems like we need more tests that covers default

[shilman]

@IanVS FWIW, hand editing the storybook code to let {default: x} = (await import('axe-core')) fixes the problem, so your theory seems confirmed.

[shilman]

FYI I've released a workaround in Storybook https://github.com/storybookjs/storybook/releases/tag/v8.1.9