Home > database >  Can't get webpack usedExport / treeshaking to work
Can't get webpack usedExport / treeshaking to work

Time:01-18

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 and usedExports are enabled.

  • sideEffects are set to false in the package.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.

  • Related