Tree Shaking 是基于 ES6 模块静态分析的未使用代码移除机制，需满足使用 import/export、工具正确配置、无副作用干扰等前提，并通过具名导出、按需引入等方式优化代码写法以提升效果。
Tree Shaking 是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动识别并移除未使用代码的优化机制，核心前提是基于 ES6 模块的静态结构特性——导入导出关系在编译期就可确定，因此能安全地“摇掉”那些从未被引用的导出（export）。
Tree Shaking 起作用的前提条件
它不是开箱即用的魔法，需要同时满足几个关键条件：
必须使用 ES6 模块语法（import/export）：CommonJS（require/module.exports）是运行时动态加载，无法静态分析，Tree Shaking 对其无效打包工具需启用相关配置：Webpack 5 默认开启（需设置 mode: "production"），Rollup 默认支持；若用 Babel 转译，要确保不把 import/export 转成 require（禁用 @babel/preset-env 的 modules: "commonjs"）代码不能有副作用（side effects）干扰判断：比如某个模块只是执行了全局赋值或监听事件，但没导出任何东西，又没被显式引入，它可能被误删。可通过 package.json 中的 "sideEffects": false 或数组精确声明哪些文件有副作用
如何写利于 Tree Shaking 的代码
即使工具支持，代码写法也直接影响效果：
避免默认导出大量对象的“大杂烩”模块：比如 export default { a(), b(), c() }，使用者哪怕只调用 utils.a，整个对象仍可能被打包进来。改用具名导出：export function a() {}、export function b() {}按需引入，而非整包引入：不要 import _ from 'lodash'，而用 import { debounce } from 'lodash'（注意：Lodash 需搭配 lodash-es 才能真正生效，普通版经 Babel 处理后会退化为 CommonJS）避免对导入变量的“无意义引用”：比如 import { unusedFn } from './utils'; console.log('loaded'); —— 这里 unusedFn 没被调用也没赋值，会被正确摇掉；但如果写成 import * as utils from './utils';，且后续没访问 utils.xxx，部分工具可能保守保留整个命名空间
验证 Tree Shaking 是否生效
别只信文档，动手确认最可靠：
立即学习“Java免费学习笔记（深入）”；
生成构建产物后手动检查：用 Webpack 可加 stats: "verbose" 或使用 webpack-bundle-analyzer 可视化依赖图，看目标函数是否出现在最终 bundle 中故意引入未使用导出，观察体积变化：比如在入口文件加一行 import { someUnusedHelper } from './helpers';，再构建对比大小——如果体积没变，说明它已被成功摇掉Vite 用户可直接看 .vite/deps/ 缓存或生产构建后的 dist/assets/ 文件内容，ESM 输出通常更透明，容易 grep 验证
基本上就这些。Tree Shaking 不复杂但容易忽略细节，关键是保持模块纯净、用对语法、配对工具。它不会帮你优化算法或压缩图片，但能把“写了却没用”的 JS 代码干净利落地剪掉。
以上就是javascript中的Tree Shaking是什么_如何利用它减少代码体积的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543031.html
微信扫一扫 
支付宝扫一扫 
