Been trying for hours to get webpack to treeshake my code. Here's the repro: https://github.com/dmt0/treeshake-repro
The problem is that even though I'm importing only a few icons from @mdi/js
, the whole bundle of 2.6MB gets imported.
Reread the webpack docs multiple times and saw multiple SO questions and GH issues. I do have the following in place:
- package.json has
"sideEffects": [
"*.scss",
"*.css"
],
Babel is configured with
"modules": false
webpack config has
usedExports: true
.Terser is configured to do 3 passes (see that sometimes one pass is not enough).
production
mode is enabled.providedExports
andusedExports
are enabled.sideEffects
are set tofalse
in thepackage.json
of the imported library:
What am I missing?
CodePudding user response:
The problem was in some completely unrelated setting - devtool
. No idea why it breaks treeshaking. It was never changed in this config file since some ancient version of webpack. Had to change from this:
devtool: env.production ? 'hidden-source-map' : 'eval-source-map',
to this:
devtool: argv.mode === 'production' ? 'hidden-source-map' : 'eval-source-map',
Now treeshaking works correctly and my bundle size went down significantly.