• 為什麽要使用 Tree Shaking？
  當從某文件模塊中導出（某一個或幾個變量、函數、對象等），然而這個文件模塊還有許多其它（我們這次並不需要）的導出，webpack會不管三七二十一簡單粗暴的將整個模塊包含進來，使得我們最終打包的文件裏有了許多不需要的垃圾。這就到了tree shaking出手的地方了，因為它能幫助我們幹掉那些用不到的代碼，大大減少打包的尺寸。

• 要想讓tree shaking能“搖起來”，有幾個要求：
  第一個要求，必須使用ES6模塊，不能使用其它類型的模塊如CommonJS之流。如果使用Babel的話，這裏有一個小問題，因為Babel的預案（preset）默認會將任何模塊類型都轉譯成CommonJS類型。修正這個問題也很簡單，在.babelrc文件或在webpack.config.js文件中設置modules： false就好了。

// .babelrc

{
  "presets": [
    ["env",
      {
        "modules": false
      }
    ]
  ]
}

// webpack.config.js

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

第二個要求，需要使用UglifyJsPlugin插件。如果在mode:"production"模式，這個插件已經默認添加了，如果在其它模式下，可以手工添加它。
第三個要求，打開optimization.usedExports。在mode: "production"模式下，它也是默認打開了的。它告訴webpack每個模塊明確使用exports。這樣之後，webpack會在打包文件中添加諸如/* unused harmony export */這樣的註釋，其後UglifyJsPlugin插件會對這些註釋作出理解。

Webpack 的 Tree Shaking