javascript中的Tree Shaking是什么_如何利用它减少代码体积

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 是否生效

别只信文档，动手确认最可靠：

标签： javascript es6 java js json vite 工具