When the project reaches a certain volume, dividing the code into modules can be easier for us to manage. However, when doing so, we may introduce unnecessary code, and Tree Shaking is a method to optimize the volume by eliminating the code used in the file.
Note: Tree Shaking only supports volume optimization for statically introduced modules.
commonly

Observe the following code:

//math.js
export const add = (a, b) => {
  console.log( a + b )
}

export const minus = (a, b) => {
  console.log( a - b )
}

//index.js
import { add } from './math'

add(1,2)

Now we're talking about index JS is packaged in development mode:

/*! exports provided: add, minus */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"add\", function() { return add; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"minus\", function() { return minus; });\nvar add = function add(a, b) {\n  console.log(a + b);\n};\nvar minus = function minus(a, b) {\n  console.log(a - b);\n};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvanMvbWF0aC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9qcy9tYXRoLmpzPzljMzkiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGFkZCA9IChhLCBiKSA9PiB7XHJcbiAgY29uc29sZS5sb2coIGEgKyBiIClcclxufVxyXG5cclxuZXhwb3J0IGNvbnN0IG1pbnVzID0gKGEsIGIpID0+IHtcclxuICBjb25zb2xlLmxvZyggYSAtIGIgKVxyXG59Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/js/math.js\n");

/***/ })

We check the corresponding code location after packaging, and we find that although it is in index JS, we only use math JS, but the main generated after packaging JS contains both add and minus. In this case, main JS obviously has space for volume compression.

On webpack config. JS, we add a piece of code:

  optimization: {
    usedExports: true
  }

Execute the packaging again, and the relevant code is changed into the following form:

/*! exports provided: add, minus */
/*! exports used: add */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"a\", function() { return add; });\n/* unused harmony export minus */\nvar add = function add(a, b) {\n  console.log(a + b);\n};\nvar minus = function minus(a, b) {\n  console.log(a - b);\n};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvanMvbWF0aC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9qcy9tYXRoLmpzPzljMzkiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGFkZCA9IChhLCBiKSA9PiB7XHJcbiAgY29uc29sZS5sb2coIGEgKyBiIClcclxufVxyXG5cclxuZXhwb3J0IGNvbnN0IG1pbnVzID0gKGEsIGIpID0+IHtcclxuICBjb25zb2xlLmxvZyggYSAtIGIgKVxyXG59Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/js/math.js\n");

/***/ })

Analyze the differences of weight repackaging methods:
The second main JS added a line of comment: / *! exports used: add * /, but the code is not reduced because we will not reduce the code in the development mode in order to facilitate our development to quickly locate errors. In the production packaging mode, webpack will automatically help us start Tree Shaking. At this time, the generated packaging code is the reduced code.

//webpack.config.js
...
  mode: 'production',
  devtool: 'cheap-module-source-map',
...

However, there is still a problem with code reduction under load. We can check the following code:
Looking at the following code, we have a css style file in index JS, let's see if it can change the style of the body.

//index.css
body{
  background: aquamarine;
}

//index.js
import '../style/index.css'

Here/ style/index. Can CSS not be introduced successfully?
The Tree Shaking mechanism finds that we haven't "used" the style file after we introduced it, so we won't import the style file, but in fact, we need this style file. At this time, we need to Set sideEffects in JSON:

//package.json
...
  "sideEffects": ["@babel/poly-fill","*.css","*.scss",...]
...