How to tree shake ES6 index files using webpack?

user_368691 0
Viewed 99

I have a file ./icons.ts, which exports:

export { GmailIcon } from './Gmail'
export { H1Icon } from './H1'
export { H2Icon } from './H2'
export { H3Icon } from './H3'
// and many more

Then I have a dynamically loaded route which loads one of these icons as such:

import { GmailIcon } from './icons';

// ...

Finally, webpack code splitting is configured such that each icon is in its own chunk.

However, when analyzing unused code using Lighthouse, I've learned that at the moment webpack is pulling all icon containing bundles when I load the dynamic route.

Is my expectation wrong that webpack should be able to understand that import { GmailIcon } from './icons' is only supposed to load the bundle containing GmailIcon or did I somehow misconfigure webpack?

webpack
0 Answers
Related