Webpack Tree shaking does not work

Serving (pit)

Because I want to study packaging products, so I turned off the ugly compression!! Tree shaking does not work!!

  • Version webpack 4. X
optimization: {
  minimize: true // This cannot be set to false, otherwise tree shaking is invalid
},
Copy the code

Hole:

  • Tree Shaking for Webpack, used only by defaultmode 为 "production"Configuration items to enable,However, if unshaven compression is configured, Webpack defaults to not “production” and tree shaking is not turned on

Also found that

Since I didn’t find this key problem at first, I kept looking at my own configuration and found additional configuration details

4 Things to watch for in Tree Shaking

  • Using ES2015 module syntax (i.eimport 和 export).
  • Make sure no compiler converts your ES2015 module syntax to CommonJS (which, by the way, is the default behavior of the now common @babel/preset-env, see preset for details)The document).
    • (Note: Babel will not convert ESM module syntax by default without special configuration.)
  • In the projectpackage.jsonFile, add"sideEffects"Properties.
    • SideEffects is not shaking by default. If you need some files that are not tree shaking, add it.
  • usemode 为 "production"Configuration items to enable, including zip code and Tree shaking.

    • (Author’s note: Ugly compression cannot be turned off)

Happy New Year!