When using dynamic imports, dead code elimination no longer works for chunks.

[LukeChannings]

Bug report

When using dynamic imports, tree shaking no longer works for generated chunks.

A small reproducible example can be found here.

Working:

If the entrypoint does not use dynamic imports and imports statically, the dead code is removed from the bundle.

Expected:

Each chunk should have its own static analysis context, and the sum.js chunk should not include the product function from lib.js, and vice versa for the product.js chunk.

Versions

webpack version: 4.11.1
Node.js version: 10.2.0
Operating System: macOS 10.12
Additional tools:

[ooflorent]

This is the expected behavior. Tree shaking is not supported on async chunks.

[LukeChannings]

Why? I'm using dynamic imports as the mechanism to split journeys, where the main entrypoint loads the journey and configures the app in a way common to all journeys (ReactDOM render, store setup, etc.).

The chunks being loaded are effectively standalone, and could be statically analysed and have dead code marked per-chunk.

Is there a technical reason that DCE can't be achieved in this configuration?
Are we worried that the main chunk will try to get something out of the dynamic bundle that's been eliminated?
What if there was an option to say we won't do that, like /* webpackChunkSideEffects: false */ in the import?

[ooflorent]

cc @sokra

[sokra]

The chunks being loaded are effectively standalone, and could be statically analysed and have dead code marked per-chunk.

Sadly this is not true. You could load both chunks at the same time. In this case module caching kicks in and same module must not be evaulated twice.

Note that this doesn't matter in your case because you only exporting pure functions, but technically both function could share a common counter. Because of this (edge-case) modules must be equal in all chunks (or at least in all chunks sharing a runtime chunk).

Currently you have to split your module into two if you want to have per-chunk tree shaking. You can do export * from "./sum"; export * from "./product" if "sideEffects": false is specified in package.json. In this case webpack will only include the used module.

[LukeChannings]

That is a shame 😕.

It looks like to get the sort of configuration I want I'll have to look at using bundle-loader for this, and have a separate entry for each of these bundles.

Thanks for weighing in.