【Webpack】TreeShaking与静态分析

TreeShaking

Tree shaking 字面意就是“摇树”,通过摇树将树上枯黄的叶子摇落。tree shaking 的作用是把项目中没必要的代码全部抖落掉,消除被引用,删除没被调用的无用模块代码,该优化最终实现的是代码体积的减少,也属于项目性能优化的一部分。
原理是利用 ES6 的模块化语法,通过静态分析代码之间的引用关系,来判断哪些模块未被引用,进而删除对应代码。

应用 tree shaking 需要具备条件:

  • 使用 ES2015 模块语法 —— import export
  • 确保没有编译器将的 ES2015 模块语法转换为 CommonJS 的(这是现在常用的 @babel/preset-env 的默认行为 --> 在 .babelrc 文件里将将 modules 设置为 false,避免将 ES Module 模块类型转换为CommonJS)。
  • 生产环境下默认开启。(将 mode 设置为 production 时,Tree Shaking 是默认开启的。production 模式自动启用了多种优化措施,包括代码压缩、作用域提升 Scope Hoisting 和 Tree Shaking,旨在减小最终bundle的体积和改善应用的性能)
  • 可以配置 sideEffects 属性(非开启必须条件,所有文章里都把它们放一起说。。),以帮助 Webpack 识别和移除那些包含副作用的模块或文件,进一步减少 bundle 大小。
// webpack.config.js

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};


// package.json

{
  "name": "tree-shaking-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "sideEffects": false,
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

sideEffect

sideEffects 属性可能会影响 Tree Shaking 的有效性。
Tree Shaking 的工作原理是分析模块的导入和导出,并移除那些未被用到的导出。但是,如果一个模块执行了一些副作用(例如,修改全局状态、立即执行的 DOM 操作等),Webpack 将默认地保守处理,不会删除该模块,即使它的导出没有被其他模块使用。这是因为 Webpack 无法确定移除该模块是否会影响程序的运行。
当你指定 sideEffects 属性时,你在告诉 Webpack 哪些文件是“纯净”的(没有副作用),因此即使这些文件的内容没有被显式导入,Webpack 在 Tree Shaking 过程中也可以安全地移除它们。

  • 设置"sideEffects": false,告诉 Webpack 项目中的所有模块都没有副作用,因此,如果某个模块的导出未被使用,Webpack 会在生产构建时把它移除。
  • 设置"sideEffects": [“./src/someSideEffectfulFile.js”],如果只有部分文件有副作用,可以通过数组具体指明。
  • 没有设置 sideEffects 属性,Webpack 会更加保守地处理模块移除,可能会导致某些实际上可以安全移除的代码被保留在最终的 bundle 中。

静态分析

Tree Shaking 实现的关键得益于 ES Module 模块的静态分析。打包工具(如Webpack)分析应用程序中所有的 import 和 export 语句,构建起依赖图,这个图展现了模块之间的依赖关系。随后,遍历这个图,标记那些被导入但未被其他模块引用的导出。这些被标记的导出即为“未使用的代码”。在最终的打包过程中,打包工具会移除那些标记为未引用的导出。在 Webpack 中,这通常发生在代码压缩(minification)阶段,使用如 Terser 这样的压缩工具来消除死代码。
在 ES Module 中,我们可以将模块的加载分为两个阶段:静态分析和编译执行;静态分析,即在代码执行前就能对整体代码依赖调用关系等进行分析读取。
ES Module 特性:

  1. 只能作为模块顶层的语句出现(而不嵌套在条件语句中)
  2. import 的模块名只能是字符串常量,导入和导出语句没有动态部分(不允许使用变量、表达式等)

ES Module 的 import 语法完美可以使用 tree shaking,因为可以在代码不运行的情况下就能分析出不需要的代码。
不同于 ES Module,CommonJS 支持动态加载模块,在加载前是无法确定模块是否有被调用,所以并不支持 tree shaking。

参考:
https://mp.weixin.qq.com/s/SbJNbSVzSPSKBe2YStn2Zw
https://webpack.docschina.org/guides/tree-shaking/
https://segmentfault.com/a/1190000040037144

上一篇:探索下一代深度学习框架:OneFlow


下一篇:NCF代码运行