什么是树摇_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 函数或类（可搜索源码关键字验证）

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

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

标签： css javascript java js json vite 工具 win