二十一、webpack之Tree Shaking基础 ------ 2019-06-03

一、Tree Shaking 的意义：
1、官方：tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup普及起来的。

2、自己的理解：字面意思理解，就是摇晃树，也就是在打包的时候，虽然我们项目中导出了某个方法，但是我们没有引入，那么在打包的时候，这个方法就不会被打包到出口文件中，从而可以让我们的项目精简掉不需要的代码；

3、生效的条件：

（1）首先，Tree Shaking只对 ES Module 规范有效果，
也就是 import {*} from './index.js' 这种语法规范，
对于commonJS规范，const test = require('./index.js') 是无效的；

（2）Tree Shaking 只在生产环境下有效果，因为在开发模式下，需要sourceMap去定位文件，所以不能删减代码，

二、Tree Shaking 的配置：
1、在webpack的配置文件中新增一个optimization属性：

module.exports = {
    mode: "development",
     ...省略
    plugins: [new HtmlWebpackPlugin({
            template: './src/index.html'
        }), new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    }
}