树摇是打包工具在构建时移除未使用ES模块代码的优化机制，依赖静态分析，需满足ES模块语法、启用该功能、无副作用等条件，并可通过产物分析验证效果。
树摇（Tree Shaking）是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动移除未使用代码的优化机制，它依赖 ES 模块（import/export）的静态结构特性，不是运行时行为，也不是简单地删掉“看起来没用”的函数。
树摇生效的前提条件
只有满足以下几点，树摇才能真正起作用：
项目必须使用 ES 模块语法（import 和 export），CommonJS（require/module.exports）不支持静态分析，无法被摇掉打包工具需启用 tree shaking（Webpack 5+ 默认开启；Rollup 默认开启；Vite 基于 Rollup，也默认支持）代码不能有副作用（side effects），否则工具会保守保留。比如直接执行的语句、全局变量赋值、console.log 等，可能阻止模块被剔除确保 package.json 中正确声明 "sideEffects": false 或精确列出有副作用的文件（如 ["*.css", "src/utils/init.js"]）
如何确认代码被成功摇掉？
最直接的方式是生成并分析打包产物：
Webpack：加 --stats=verbose 或用 webpack-bundle-analyzer 可视化查看哪些模块/导出未被引用Rollup/Vite：启用 build.rollupOptions.output.manualChunks 或输出 stats，配合插件如 rollup-plugin-visualizer检查最终 bundle 中是否还存在你确定没调用的 export 函数或类（可搜索源码关键字验证）
常见导致树摇失效的情况及应对
这些写法看似合理，却会让打包器“不敢”删除代码：
立即学习“Java免费学习笔记（深入）”；
动态 import() + 字符串拼接：如 import(`./pages/${page}.js`) —— 路径不固定，工具无法静态判断，整个模块会被保留重命名导入但未使用：如 import { foo as bar } from './utils'; 却没用 bar —— 仍算作“已导入”，但若 foo 是命名导出且无其他引用，通常仍可被摇（取决于工具实现）默认导出对象含多个方法，只用其中一个：ESM 不支持“部分解构摇”，整个对象导出不会被拆开；建议改用命名导出（export const fn1 = ...; export const fn2 = ...;）第三方库用了 CommonJS 或 UMD：例如 lodash 整包引入（import _ from 'lodash'）就很难摇；应改用按需导入（import debounce from 'lodash/debounce'）或搭配 babel-plugin-lodash
主动辅助树摇的小技巧
除了写法规范，还可以主动帮打包器做判断：
避免在模块顶层写执行逻辑（如直接调用函数、修改 window），除非明确需要副作用对工具库模块显式标记 /*#__PURE__*/ 注释，提示压缩器该调用可安全移除（如 /*#__PURE__*/ console.log('debug')）使用 export * from 'xxx' 时谨慎——它会 re-export 所有内容，可能引入冗余导出；优先显式列出需要的项开发阶段用 eslint-plugin-tree-shaking 提前发现潜在问题（如未使用的导出、不可达的 export default）
基本上就这些。树摇不是黑魔法，核心是“静态可分析 + 无副作用 + 正确模块语法”。写清楚、导出明确、引入克制，剩下的交给打包器就好。
以上就是什么是树摇_javascript中如何消除无用代码？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542645.html
微信扫一扫 
支付宝扫一扫 
