Treeshake "static" dynamic import

[antfu]

Feature Use Case

Treeshake is such a brilliant idea. Nowadays, it powers so many frameworks/libraries to innovate without worries too much about the bundle size.

It's great that you can take some parts from a package, without paying the cost of the entire bundle:

import { unique } from 'lodash-es'

It works great on static imports. However, sometimes when you want to make some part lazy-load, treeshaking stopped to work:

const { unique } = await import ('lodash-es') // entire `lodash-es` will be bundled

Workaround

There is a workaround to this, is that you can create a temporary module that does the reexport:

// ./re-export.js
import { unique } from 'lodash-es'

const { unique } = await import ('./re-export.js') // now you have tree-shaking

However, this makes it verbose to use and easy to miss.

Feature Proposal

Support tree-shaking dynamic imports that are known at build time. Namely, doing object destructure and directly assigning with await import()

Valid cases

const { foo, default: anotherName } = await import('foo')

const { foo } = await import('foo')
const { bar } = await import('foo')

(await import('foo')).foo

Invalid cases

(Tree shaking is not applicable, to the current behavior.)

// full bundle
const foo = await import('foo')

// not waiting
const promise = import('foo')

// rest
const { foo, ...bar } = await import('foo')

// imported multiple times, but one of them is not tree shakable
const { foo } = await import('foo')
const foo = await import('foo')

---

Even though the "valid cases" are a bit strict, I believe it's still a very common pattern for people to benefit from.

---

Idea credits: Webpack 5.80 https://twitter.com/TheLarkInn/status/1648739331807510528

[antfu]

Let me know if you think this is a good direction.

I am already working on it locally, might need sometime to get familiar with the codebase :)

[sapphi-red]

Linking some related issues: #3417, #3447, vitejs/vite#11080

[antfu]

Thanks for the reference!

[rollup-bot]

This issue has been resolved via #4952 as part of rollup@3.21.0. You can test it via npm install rollup.