Tree Shaking 是构建工具利用 ES6 模块静态结构实现的代码优化技术，通过标记、剔除、压缩三步移除未使用代码。其生效依赖于静态 import/export、无副作用声明、命名导出及正确配置如 babel 的 modules: false 和生产模式打包，确保仅保留运行时真正需要的代码，从而减小包体积。
Tree Shaking 并不是 JavaScript 本身的特性，而是构建工具（如 Webpack、Rollup）在打包过程中利用 ES6 模块系统的静态结构，来实现“摇掉”未使用代码的一种优化手段。它的目标是减少最终打包文件的体积，只保留实际用到的代码。
ES6 模块的静态结构是前提
Tree Shaking 能够工作的核心前提是：ES6 模块（import / export）是静态的，也就是说，模块的导入导出关系在代码运行前就可以被分析清楚。
与之对比，CommonJS（require / module.exports）是动态的，比如：
if (condition) { require(‘some-module’); }
这种写法在运行时才决定是否加载模块，构建工具无法在打包阶段准确判断哪些代码会被用到，因此不能有效做 Tree Shaking。
立即学习“Java免费学习笔记（深入）”；
基本工作流程
Tree Shaking 的过程大致分为三步：
标记（Mark）：从入口文件开始，顺着 import 关系递归查找所有被引用的模块和函数。剔除（Sweep）：将没有被引用到的导出（export）标记为“可删除”。压缩（Minify）：通过压缩工具（如 Terser）真正移除这些未使用的代码。
如何确保 Tree Shaking 生效
即使使用了 ES6 模块语法，某些写法仍可能导致 Tree Shaking 失效。以下是一些关键注意事项：
避免副作用（side effects）：如果模块有副作用（比如执行了全局操作），构建工具默认不敢删除它。可通过 package.json 中的 “sideEffects”: false 明确告知工具哪些文件无副作用。使用命名导出（named export）：Tree Shaking 对命名导出更友好。例如：export const funcA = () => {};export const funcB = () => {};
如果只用到了 funcA，funcB 就可以被安全移除。
避免解构赋值后整体引用：比如这样写会阻止 Tree Shaking：import * as utils from ‘./utils’;utils.funcA(); // 只用了 funcA，但整个 utils 被引入
应改为：
import { funcA } from ‘./utils’;
构建工具的支持
Webpack 和 Rollup 都支持 Tree Shaking，但需注意配置：
使用 mode: ‘production’，因为生产模式下自动开启压缩和 Tree Shaking。确保 babel 编译时不要把 ES6 模块转成 CommonJS。在 babel 配置中设置：{ “presets”: [[“@babel/preset-env”, { “modules”: false }]] }
这样才能保留 import/export 的静态结构。
基本上就这些。Tree Shaking 不是魔法，它依赖静态分析 + 正确的模块语法 + 构建配置协同工作。只要代码写得“干净”，大多数现代项目都能从中受益。不复杂但容易忽略细节。
以上就是JavaScript Tree Shaking原理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533747.html
微信扫一扫 
支付宝扫一扫 
