# Tree Shaking

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

而 Tree Shaking 正是依赖于此, 在编译时可以找到那么不需要的代码,然后移除,从而达到代码量变小,如下图:

fsdfsd

注意,掉下来的苹果都是不要的,只要留在树上的苹果(恰巧我们需要晚熟的苹果,就叫苹果坚强)

其实并不需要做额外的操作,在 mode 设置为 production 的时候,就会移除不需要的代码

# 将文件标记为无副作用(side-effect-free)

当自己做项目的时候,完全可以实现无副作用,然鹅,当引用一个第三方的模块时,就无法保障了,所以,当引入一个模块后, 该模块有必要配置副作用属性。

要在 package.json 中的 sideEffects 属性中设置

{
  "name": "your-project",
  "sideEffects": false
}

如果存在副作用

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

通配符

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}