2

I have a dependency that includes references to document that gets imported into a service worker. The documents are tree-shaken out in production mode. However, I actually need for my service worker to be fully functional also in development mode (it does a lot more than just caching) so need to somehow also get this shaken out in dev builds. Nothing I do seems to be able to get my dev and prod builds to even remotely a similar size (prod build is around 30% of the size). I have the following config for both dev and prod:

optimization: { minimize: true, minimizer: [new TerserPlugin()] },

and am adding new webpack.optimize.ModuleConcatenationPlugin() to plugins, which I saw might be (or have been) required.

As far as I can tell, I have pretty much exactly the same config for both dev and prod, yet get quite different bundle sizes. How can I get get the same thing happening on dev builds as prod builds?

AntonOfTheWoods
  • 809
  • 13
  • 17
  • Any luck finding a way? I'm seeing treeshaking work in production while I've got module concatenation disabled BTW. I've found that this setting: optimization: { usedExports: true, // This enables tree shaking in development mode }, should turn treeshaking on, but it's only partial - it removes unused exports but doesn't eliminate dead code resulting from them being removed. Oh, wait, I think I found something – naugtur Jul 25 '23 at 10:41
  • Apparently you can also set up Terser plugin to do dead code elimination without mangling the code, but it does eliminate most whitespace which is annoying. – naugtur Jul 25 '23 at 10:54

0 Answers0