webpack4.15.1 学习笔记(四) — Tree shaking

• Tree shaking
  • 原理
  • 标记效果
  • 副作用代码不可被删除
  • 如何实现 Tree shaking 的几种方法
  • 总结

Tree shaking

本质上为了消除无用的js代码，减少加载文件体积的方式，使其整体执行时间更短。无用的代码，又有另外一种叫法：Dead Code：

1. 代码不可到达，不会执行，如不可能进入的分支，return 之后的语句等
2. 代码中的某个变量只有写，而没有读操作
   Tree Shaking 的执行环境宿主一般是Node，而不是浏览器，且必须遵循ES6 Module规范，因为 ES6 Module 可以静态分析，可以推导出变量和导入依赖变量的引用关系。

原理

Tree-Shaking实现步骤

1. 标记出模块导出值哪些没有被用过，标记功能需要配置 optimization.useExports = true 开启
   • Make 阶段，收集导出变量并记录到模块依赖图ModuleGraph 变量中。
   • Seal 阶段，遍历ModuleGraph 标记模块导出变量有没有被使用
   • 生成产物时，若变量没有被其他模块使用时则删除对应的导出语句
2. 使用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 的几种方法

1. 执行 webpack --mode development时，打包后的代码并没有压缩且包含注释，添加 --optimize-minimize 命令进行压缩后。将打包后的代码压缩至一行，并删除了未引用的代码，可以把这串命令放入 package.json 的 scripts 字段中执行。
2. 当没有设置 webpack mode模式时。会提示一行黄字 The 'mode' option has not been set, webpack will fallback to 'production' for this value. 因此该配置在mode=production时默认为true，也就是说webpack生产模式中，自动开启了Tree Shaking这个功能，可以直接 执行 webpack 命令进行打包。
3. 其实--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
  ],  
}

4. 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 负责「摇掉」它们

总结

1. Tree Shaking 用于减小文件体积
2. 其工作流程是先标记，后删除
3. 代码必须遵循 ES Module 规范
4. 删除代码失灵很可能因出现副作用代码导致