什么是树摇_j*ascript中如何消除无用代码？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-12-15

浏览次数：次

树摇是打包工具在构建时移除未使用ES模块代码的优化机制，依赖静态分析，需满足ES模块语法、启用该功能、无副作用等条件，并可通过产物分析验证效果。

什么是树摇_javascript中如何消除无用代码？

树摇（Tree Shaking）是 J*aScript 打包工具（如 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 函数或类（可搜索源码关键字验证）

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

AI Code Reviewer

AI自动审核代码

112 查看详情 AI Code Reviewer

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

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

以上就是什么是树摇_j*ascript中如何消除无用代码？的详细内容，更多请关注其它相关文章！