Webpack Optimizations Causing an Increase in Bundle Size

Question

I noticed looking at the bundled code in the Chrome Dev Tools' Coverage tool that there was a lot of unused code being included in my client bundle, so I did some research about webpack optimizations I could make and added these to my Webpack config.

        optimization: {
            usedExports: true,
            sideEffects: true,
            minimize: true,
            providedExports: true,
        },

After adding this, the coverage tool showed a huge decrease in the size column, as well as a decrease in the unused code percentage, so I assumed it worked. I also examined that the unused code I saw before was removed from the bundle. However, upon deploying the application, a monitoring tool I use showed that the bundle size had actually increased by 2kb. I also tried using the Statoscope Plugin and it shows the bundle increasing by 2kb.

I am a bit at a loss at why exactly this could be increasing the size of the bundle given that the unused code seems to be removed and the total number of lines in the bundle is also decreasing. I have tried putting this in other applications as well, and I see the same exact pattern where the Coverage tab shows a huge decrease in size, but the bundle size is actually getting bigger.

Is there a reason that the Coverage tool would show a decrease in size when actually the bundle size is increasing?

Answer 1

It seems that webpack-dev-server creates its own separate bundle stored in memory, which is distinct from the one produced by my build script, and webpack has tree-shaking optimizations disabled by default for when mode is 'development' and enabled by default when mode is 'production'. I thought that webpack-dev-server was serving the bundle webpack produces from my build script, but it was making a bundle in development mode which is what caused the discrepancy in the bundle sizes between what I saw in the Statoscope analyzer and the Chrome Coverage tool.