[SOLVED] Can't get webpack usedExport / treeshaking to work

Can't get webpack usedExport / treeshaking to work

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?

Solution

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.