webpack之Tree shaking（摇树优化）

概念：

tree shaking就是只把用到的方法打入bundle,没有使用到的方法会在uglify阶段被擦除掉，这样得以优化项目体积。

使用：

• webpack默认支持，在.babelrc里面设置moudules:false即可（ 如果你要把es6转成es5，同时又要开启tree shaking,需要在.babelrc里面设置modules:false,不然babel默认会把es6转成commonjs规范写法，这样就不能进行tree shaking了。）
• mode：production 的情况下默认开启

要求：

必须是es6的语法（import导入），cjs的方式不支持（require等）

原理：（利用es6模块的特点）

        只能作为模块顶层的语句出现

        import的模块名只能是字符串常量

        import binding是immutable的

注意：

编写的模块代码不能有副作用，如果有副作用的话，Tree shaking也会失效

 副作用这个概念来源于函数式编程(FP)，纯函数是没有副作用的，也不依赖外界环境或者改变外界环境。纯函数的概念是：接受相同的输入，任何情况下输出都是一样的。

非纯函数存在副作用，副作用就是：相同的输入，输出不一定相同。或者这个函数会影响到外部变量、外部环境。

函数如果调用了全局对象或者改变函数外部变量，则说明这个函数有副作用。