Vite not tree-shaking dynamic imports

[benlind]

Describe the bug

Vite 4.4.9 is not tree-shaking the contents of dynamically-imported modules:

// utils.js
export function export1() {
  console.log('export1')
}
export function export2() {
  console.log('export2')
}

// main.js
async function main() {
  const { export1 } = await import('./utils.js')
  export1()
}
main()

In the above example, even though only export1 is imported, both export1 and export2 will be bundled by Vite.

If you use a static import, export2 is correctly tree-shaken from the final bundle:

import { export1 } from './utils.ts'
export1()

Rollup has supported dynamic import tree-shaking since 3.21.0 (description of feature, PR), and Vite 4.4.9 is using Rollup 3.28.0, so Vite should also support it.

Vite #11080 was closed saying "rollup now supports this," but the repro link was not a Vite repro, but a vanilla Rollup repro. I attached a vanilla Vite repro, and here is a Vite Vue TS repro.

Finally, here is a repro of Rollup correctly tree-shaking the dynamic import.

Reproduction

https://stackblitz.com/edit/vitejs-vite-z6x1lz?file=main.js

Steps to reproduce

1. Open the repro stackblitz
2. npm run dev
3. Look at the dist/ output for "export4". It will appear even though it shouldn't.

System Info

Stackblitz

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-z6x1lz (Open reproduction)
• vitejs-vite-tnnmas (Open reproduction)
• stackblitz-starters-mdlvzd (Open reproduction)

[sapphi-red]

Ah, I guess this is happening because Vite replaces

const { export3 } = await import('./not-tree-shaken.js');
// into
const { export3 } = await __vitePreload(() => import('./not-tree-shaken.js'), []);

Then, rollup fails to analyze this.

[benlind]

@sapphi-red , I see you added the "has workaround" label. Are you aware of a workaround?

[sapphi-red]

This workaround (#11080 (comment)) should still work.

[benlind]

Thanks for the link.

Unfortunately that workaround is too unwieldy for my use case. I'm using a "main": "index.ts" file in my package.json in a monorepo, and I want to support dynamic importing from that main file (I'm also using Webpack 4, which doesn't support the "exports" field, which would have let me use multiple exports). I would have to create facade files in every other package that uses this package for every one of the many exports.

[sapphi-red]

(I'm also using Webpack 4, which doesn't support the "exports" field, which would have let me use multiple exports)

You don't need to use exports field for multiple exports. If you don't declare exports field, all files are exposed. For example, if you have a package named foo and have bar.ts in the root directory of the package, you can import that file with foo/bar.ts.

[benlind]

Certainly true, though in our monorepo we enforce importing from the canonical main files for structure/API hygiene.

[ccreusat]

Hi,

I'm coming from this issue rollup/rollup#4951 and I cannot import dynamic component from a react library:

const OnboardingModal = lazy(async () => {
  const module = await import("@edifice-ui/react");
  return { default: module.OnboardingModal };
});

This will break tree-shaking and imports whole library..

I have to import and re-export my component to use it without importing whole library.

// Example
import { OnboardingModal } from "@edifice-ui/react";

export default OnboardingModal;

Then I can use lazy / await import

const OnboardingModal = lazy(async () => await import("./Re-export"));

Any idea if it's possible since this PR was merged ?

I don't know if there is any point in re-exporting to use Suspense/Lazy instead of a static import.