Tree Shaking 是构建工具基于 ES Module 静态结构实现的代码优化技术，通过静态分析标记未使用导出并结合 sideEffects 配置与压缩工具剔除死代码，从而减小打包体积。
Tree Shaking 并不是 JavaScript 引擎本身的功能，而是一种在构建阶段由打包工具（如 Webpack、Rollup、Vite 等）实现的优化技术。它的目标是“摇掉”那些被导入但未实际使用的代码，从而减小最终打包体积。虽然名字听起来像运行时行为，但它本质上是静态分析 + 模块机制结合的产物。
1. 基于 ES Module 的静态结构
Tree Shaking 能够实现的前提是使用 ES6 Module（即 import/export），因为这种模块系统是静态的——模块依赖和导出在代码解析阶段就能确定，不需要执行代码。
与之对比，CommonJS（require/module.exports）是动态的，比如：
ES Module（静态，支持 Tree Shaking）：
import { func } from './utils.js';
CommonJS（动态，不支持 Tree Shaking）：
const utils = require('./utils');
const func = utils.func;
甚至可以写成：
if (Math.random() > 0.5) {
const mod = require('some-module');
}
这种动态性让构建工具无法在不执行代码的情况下判断哪些模块真正被使用，因此无法安全地移除代码。
立即学习“Java免费学习笔记（深入）”；
2. 静态分析标记未使用导出
构建工具在打包过程中会进行以下几步操作：
从入口文件开始，递归解析所有 import 语句 构建模块依赖图（Module Dependency Graph） 标记每个模块中哪些 export 被实际引用 未被引用的 export 被标记为“可删除”
例如：
// utils.jsexport const unusedFunc = () => { console.log("I'm not used");};export const usedFunc = () => { console.log("I'm used");};// main.jsimport { usedFunc } from './utils.js';usedFunc();
打包工具发现 unusedFunc 没有被任何模块引用，就可以在最终输出中将其剔除。
3. 生产模式下的副作用处理
有些模块虽然没有显式导出，但执行时会产生副作用（如修改全局对象、注册插件等）。为了防止误删这类代码，ES Module 提供了 sideEffects 标记。
在 package.json 中可以这样声明：
"sideEffects": false：表示整个项目没有副作用，所有未引用的模块都可以安全删除 "sideEffects": ["./src/polyfill.js"]：仅这些文件有副作用，不能被摇掉
Webpack 和 Rollup 都会依据这个字段决定是否保留某些模块。
4. 实际生效需要配合压缩工具
即使 Tree Shaking 标记了无用代码，最终移除它们通常依赖 UglifyJS 或 Terser 这类压缩工具。
它们会在 minify 阶段识别出：
被引入但未调用的函数 没有产生外部影响的变量声明 死代码（dead code）
然后将这些代码真正从输出中删除。
基本上就这些。Tree Shaking 不是魔法，它依赖 ES Module 的静态结构 + 构建工具的分析能力 + 正确的配置（如 sideEffects）共同实现。只要确保使用 import/export，并在生产环境下开启压缩，大多数现代前端工程都能自动受益于这一优化。
以上就是JavaScript Tree Shaking原理实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531466.html
微信扫一扫 
支付宝扫一扫 
