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插件會對這些註釋做出理解。