2

in my webpack config

when

mode: "development"

if I use

import { pick, flattenDeep, chunk, fromPairs } from 'lodash-es';

or

import _ from 'lodash-es';

the bundle size is the same at about 3.27 mb.

but when I set mode to production in my webpack config, I get a bundle size of 1.52mb for the first import syntax, but I get 2.5mb for the second syntax, which leads my to believe that in development the tree shaking is not occuring.

I read on another stack overflow question that the lodash-es was an es6 module and that webpack could only tree shake on those, and not common js, and I also read that in development for the webpack config I would need

plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
],

which I have had the whole time.

So I am curious what I am missing and why the bundle size is not reduced in development when using that plugin mentioned.

I am experimenting these changes in an example project I created at https://github.com/JordanKlaers/vueWebpackPlayground

Jordan Klaers
  • 149
  • 11

1 Answers1

1

By default webpack's tree-shaking mechanism works on the minification phase (by terser-webpack-plugin), this phase is enabled by default only on production mode, therefore, you don't see any changes in bundle size when you are on development.

Module concat plugin works only on es6 modules, and it can improve the tree-shaking process.

felixmosh
  • 32,615
  • 9
  • 69
  • 88
  • 1
    I tried adding that plugin you mentioned and I am still not seeing a reduced bundle size when in development, but I do when in production. Is there something more I am missing? I have pushed my attempted changes to a branch "treeShaking" at the same repository above – Jordan Klaers Jun 04 '19 at 17:36
  • As I mentioned, tree-shaking works only in **production** mode, it won't works in dev mode – felixmosh Jun 04 '19 at 17:48
  • but if production and development are different due to default setting, why would I not be able to manually add things to produce a similar build? Turns out I was able to add the new TerserPlugin(), in the plugins, not in the optimization.minimizer array and it seems the do tree shaking (unless something else entirely is happening) because the bundle size for the lodash chunk went from 1.6 Mb to 90 Kb (with mode production it goes down to ~10Kb so obviously more is happening) – Jordan Klaers Jun 04 '19 at 17:55
  • Because this is not a good practice to enable production optimizations on dev env, why? cause it takes time to minify (the process that tree-shaking is part of). – felixmosh Jun 04 '19 at 17:59
  • oh im sorry im not doing this for a business level application, I just want to have a better understanding of what webpack is doing that makes production builds more efficient, by manually implementing things in the development environment of a simple project im playing around with – Jordan Klaers Jun 04 '19 at 18:00
  • 1
    to play around in that manner, you may want to disable all default settings by using mode: none – Madeline Ritchie Jun 07 '19 at 13:30