Tree Shaking 是一种基于 ES6 模块静态分析的死代码消除机制，通过标记未引用的导出并剔除来优化打包体积。它依赖于 import/export 语法、生产模式配置及 sideEffects 声明，在 Webpack、Rollup 等工具中与代码压缩协同工作，有效减少 bundle 大小。
Tree Shaking 并不是一种压缩算法，而是一种 “死代码消除” 的优化机制，主要用于 JavaScript 模块打包过程中，剔除那些被定义但未被引用的代码。它广泛应用于现代前端构建工具如 Webpack、Rollup 和 Vite 中，配合 ES6 模块（import/export）静态结构实现高效的体积优化。
ES6 模块的静态结构是前提
Tree Shaking 能够工作的关键在于使用了 ES6 的静态模块语法。与 CommonJS 的动态 require 不同，ES6 的 import 和 export 在编译时就能确定依赖关系，这使得构建工具可以在打包前分析出哪些函数或变量从未被使用。
例如：
// utils.jsexport const unusedFunc = () => { console.log("这个函数没被调用");};export const usedFunc = () => { return "Hello";};// main.jsimport { usedFunc } from './utils.js';usedFunc();
在这个例子中，unusedFunc 虽然被导出，但没有被任何模块导入使用。在生产构建时，支持 Tree Shaking 的打包工具会标记这部分为“不可达代码”，并在最终输出中将其移除。
立即学习“Java免费学习笔记（深入）”；
标记与剔除：Tree Shaking 的执行流程
Tree Shaking 实际上包含两个阶段：标记（marking）和剔除（tree pruning）。
从入口文件开始，递归分析所有通过 import 引用的模块成员 将所有被实际使用的导出标记为“活跃” 未被标记的导出被视为“死代码” 在生成最终包时，这些死代码不会被包含进去
注意：这个过程依赖于打包工具的 “副作用”分析。如果一个模块有副作用（比如修改全局变量、注册事件等），即使没有显式导入，也可能被保留。
CodeSquire
AI代码编写助手，把你的想法变成代码
103 查看详情 
确保 Tree Shaking 生效的关键条件
要让 Tree Shaking 正常工作，需要满足几个必要条件：
使用 ES6 模块语法（import/export），避免 require 构建工具配置为生产模式（如 Webpack 开启 mode: 'production'） 在 package.json 中声明 "sideEffects": false 或提供数组说明哪些文件有副作用 避免在模块顶层执行具有实际影响的语句（除非明确需要）
例如，在库开发中，正确设置 sideEffects 可以帮助使用者在引入部分功能时自动排除未用模块。
与代码压缩的协同作用
Tree Shaking 通常发生在打包阶段，而代码压缩（如 Terser）在之后进行。前者负责逻辑上的代码剔除，后者负责字符级压缩（如变量名缩短、空白去除）。两者结合能显著减小最终 bundle 体积。
即便如此，Tree Shaking 不会处理以下情况：
动态导入（import()）中的模块无法静态分析 CommonJS 模块（module.exports）无法精确追踪导出使用情况 带有副作用的模块默认会被完整保留
基本上就这些。Tree Shaking 是现代前端工程化中提升性能的重要手段，核心在于“静态可分析”。只要结构清晰、模块规范，大部分未使用代码都能被自动清除，无需手动干预。不复杂但容易忽略。
以上就是JavaScript压缩优化_Tree Shaking算法工作机制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/867907.html
微信扫一扫 
支付宝扫一扫 
