webpack tree-snaking

Tree-Snaking

作用

• 消除js上下文无用的代码

原理

• 利用ES6 Moudles 静态解析，依赖关系提前确定
• 去除import无用的代码

实现

1. 通过webpack自身利用ES6 Moudles分析模块间的依赖关系，去除代码中不使用import模块引用。
2. 设置webpack mode=production, 利用插件（terser-webpack-plugin）将未使用的代码进行删除。

注意

1. webpack必须是es6 modules

2. 模块尽可能的使用无副作用（side Effect）的

   无副作用指的是：给定相同的输入，就有相同的输出，不会改变外部的环境

3. 在package.json设置sideEffect，设置副作用的文件

//package.json
{
    name: 'webpack-project',
    sideEffect: ["./index.js"],
}