【Webpack】TreeShaking与静态分析

最新推荐文章于 2025-12-04 10:11:00 发布

原创最新推荐文章于 2025-12-04 10:11:00 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #es6

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文详细解释了Treeshaking的原理，它是如何通过ES6模块化和静态分析来消除未被引用的代码，以及在Webpack中如何设置sideEffects属性以增强TreeShaking效果。特别强调了生产环境下开启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 特性：