什么是Javascript的树摇优化？

Tree Shaking 是一种构建时静态分析移除未使用 ES Module 导出代码的技术，依赖 ES 模块语法、按需引入、生产模式及无副作用声明，剔除未被 import 的导出（如未引用的函数 b），但不处理死代码或动态逻辑。

树摇优化（Tree Shaking）是一种在构建阶段自动移除 JavaScript 中未使用代码的技术。它不运行代码，而是靠静态分析 import/export 语句，识别出哪些函数、变量或模块从未被引用，然后把它们从最终打包产物里剔除。

它为什么叫“树摇”？

把整个项目想象成一棵树：?
- 树干和枝叶 = 所有模块和导出内容
- 枯叶 = 没被任何地方 import 的导出（比如只定义但没用过的函数）
- 摇一摇 = 构建工具扫描依赖、标记、剔除
- 最后留下的，是真正支撑应用运行的“健康部分”

它靠什么工作？

必须同时满足这几个条件：

• 代码用的是 ES Module 语法（export / import），不是 require 或 module.exports
• 导入方式是“按需引入”，比如 import { throttle } from 'lodash-es'，而不是 import _ from 'lodash'
• 构建工具处于生产模式（如 Webpack 的 mode: 'production'），并启用标记功能（如 usedExports: true）
• 没有意外的副作用——比如某文件一加载就改全局变量、注入样式或执行 IIFE，这类代码默认不会被删，除非明确声明 "sideEffects": false 在 package.json 里

它到底删了什么？

删的是“未被引用的导出”，不是“没调用的函数”。举个例子：

// utils.js
export function a() { return 1; }
export function b() { return 2; }
export function c() { return 3; }
// main.js
import { a, c } from './utils';
console.log(a(), c());

标签： javascript java js json 工具 ai 一加 为什么