CODEWITHSUNDEEP
webpackdevelopment-environmentproductiontree-shaking
Jordan Klaers
Jordan Klaers

Reputation: 149

What is different between webpack production and development regarding tree shaking

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

Upvotes: 2

Views: 1860

Answers (1)

felixmosh
felixmosh

Reputation: 35503

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.

Upvotes: 1

Related Questions