Webpack 的 Tree Shaking

• 为何要使用 Tree Shaking？
  当从某文件模块中导出（某一个或几个变量、函数、对象等），然而这个文件模块还有许多其它（咱们此次并不须要）的导出，webpack会无论三七二十一简单粗暴的将整个模块包含进来，使得咱们最终打包的文件里有了许多不须要的垃圾。这就到了tree shaking出手的地方了，由于它能帮助咱们干掉那些用不到的代码，大大减小打包的尺寸。

• 要想让tree shaking能“摇起来”，有几个要求：
  第一个要求，必须使用ES6模块，不能使用其它类型的模块如CommonJS之流。若是使用Babel的话，这里有一个小问题，由于Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型。修正这个问题也很简单，在.babelrc文件或在webpack.config.js文件中设置modules： false就行了。

// .babelrc

{
  "presets": [
    ["@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

// webpack.config.js

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', { modules: false }]
                }
            }
        }
    ]
}

第二个要求，须要使用UglifyJsPlugin插件。若是在mode:"production"模式，这个插件已经默认添加了，若是在其它模式下，能够手工添加它。
第三个要求，打开optimization.usedExports。在mode: "production"模式下，它也是默认打开了的。它告诉webpack每一个模块明确使用exports。这样以后，webpack会在打包文件中添加诸如/* unused harmony export */这样的注释，其后UglifyJsPlugin插件会对这些注释做出理解。