webpack4.15.1 学习笔记(四) — Tree shaking
Tree shaking
本质上为了消除无用的js代码，减少加载文件体积的方式，使其整体执行时间更短。无用的代码，又有另外一种叫法：Dead Code：
- 代码不可到达，不会执行，如不可能进入的分支，return 之后的语句等
- 代码中的某个变量只有写，而没有读操作
Tree Shaking 的执行环境宿主一般是Node，而不是浏览器，且必须遵循ES6 Module规范，因为 ES6 Module 可以静态分析，可以推导出变量和导入依赖变量的引用关系。
原理
Tree-Shaking实现步骤
- 标记出模块导出值哪些没有被用过，标记功能需要配置 optimization.useExports = true 开启
- Make 阶段，收集导出变量并记录到模块依赖图ModuleGraph 变量中。
- Seal 阶段，遍历ModuleGraph 标记模块导出变量有没有被使用
- 生成产物时，若变量没有被其他模块使用时则删除对应的导出语句
- 使用Terser删除掉没有被用到的导出语句
标记效果
webpack 负责对代码进行标记，把import & export 标记为3类：
- 所有 import 标记为
/\* harmony import \*/； - 被使用过的 export 标记为
/\* harm export([type])\*/； - 未被使用过的 export 标记为
/\* unused harmony export [FuncName] \*/，其中[FuncName] 为export 的方法名称
副作用代码不可被删除
副作用是函数式编程的一个概念，是指当调用函数时，除了返回函数值之外，还会对调用函数产生附加的影响。比如console，读取和修改外部变量，导入css文件，引入Polyfill 等
会导致document.title 没有成功被设置导致出现bug。const setTitle = ()=>{
document.title = "tree shaking learn";
}
const a = setTitle(); // 虽然a变量没有被其他地方使用，但由于副作用，如果将其删除,会导致document.title 没有成功被设置导致出现bug。
如何实现 Tree shaking 的几种方法
- 执行
webpack --mode development时，打包后的代码并没有压缩且包含注释，添加--optimize-minimize命令进行压缩后。将打包后的代码压缩至一行，并删除了未引用的代码，可以把这串命令放入 package.json 的 scripts 字段中执行。 - 当没有设置 webpack mode模式时。会提示一行黄字 The 'mode' option has not been set, webpack will fallback to 'production' for this value. 因此该配置在mode=production时默认为true，也就是说webpack生产模式中，自动开启了Tree Shaking这个功能，可以直接 执行
webpack命令进行打包。 - 其实
--optimize-minimize的底层实现是一个插件UglifyJsPlugin，参考其他教程直接在webpack.config.js里配置，运行后报错，原因是在新版本的webpack中，移除了这个插件，因此该方法不可行。RemovedPluginError: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
const webpack = require('webpack');
module.exports = {
// ...
plugins:[
new webpack.optimize.UglifyJsPlugin(), // RemovedPluginError webpack.optimize.UglifyJsPlugin has been removed
],
}
- Tree Shaking并不是 webpack 的某个配置选项，而是
一组功能搭配使用后的优化效果。并且在生产模式production下自动使用。根据上述RemovedPluginError报错提示，配置optimization中的usedExports和minimize优化功能实现Tree Shaking。
module.exports = {
// ...
optimization: {
usedExports: true, // 表示在输出结果中模块只导出外部使用了的成员。
minimize: true, // 开启代码压缩优化, 删除注释、删除没有用到的代码、删除空白、替换变量名为简短的名称等,
},
};
webpack打包后，将每个模块放到一个函数中，包含成员的定义和成员的导出。
usedExports 可以标记模块导出的成员是否被外部使用，从而在打包结果中，不导出未使用的成员。标记打包后表现为：包裹模块的函数中保留定义这些成员的代码，但是移除导出它们的代码，并添加注释 /* unused harmony export */。
而函数中没有了导出它们的代码，也就表示这些成员未使用，那定义它们的代码也没有了意义，minimize就会将这些未使用的定义成员的垃圾代码一并删除。
usedExports 负责标记「枯树叶、枯树枝」
minimize 负责「摇掉」它们
总结
- Tree Shaking 用于减小文件体积
- 其工作流程是先标记，后删除
- 代码必须遵循 ES Module 规范
- 删除代码失灵很可能因出现副作用代码导致
