树摇是什么？如何用JavaScript清理无用代码？

学习文章要努力，但是不要急！今天的这篇文章《树摇是什么？JavaScript如何清理无用代码？》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

树摇是打包工具在构建时移除未使用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 函数或类（可搜索源码关键字验证）

常见导致树摇失效的情况及应对

这些写法看似合理，却会让打包器“不敢”删除代码：

• 动态 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）

基本上就这些。树摇不是黑魔法，核心是“静态可分析 + 无副作用 + 正确模块语法”。写清楚、导出明确、引入克制，剩下的交给打包器就好。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~