Tree Shaking 能剔除未引用的工具库函数，前提是库支持 ES 模块且导出静态可分析；需使用 ESM 版本（如 lodash-es）、避免全量引入、声明 sideEffects 并验证打包结果。
Tree Shaking 能剔除未引用的工具库函数，但前提是工具库本身支持 ES 模块（ESM）且导出方式是 静态可分析的。它不是 JavaScript 引擎自动做的优化，而是构建工具（如 Webpack、Vite、Rollup）在打包时基于 ES 模块的 import/export 语法进行的静态依赖分析。
确保工具库以 ESM 形式提供
CommonJS（require / module.exports）无法被 Tree Shaking，因为其导入是动态的。你需要：
- 使用官方已提供 ESM 版本的库（如 Lodash 的
lodash-es，而非lodash） - 检查
package.json中是否有"type": "module"或"exports"字段指向 ESM 入口（例如"./dist/index.mjs"） - 避免通过
require()或import * as xxx from 'xxx'全量引入 —— 这会阻止对单个函数的摇树
正确按需导入具体函数
不要全量导入，而要直接解构或单独引入所需函数：
❌ 不推荐（全量引入，无法摇树）：
立即学习“Java免费学习笔记（深入）”；
import _ from 'lodash-es';<br>console.log(_.debounce(...));
✅ 推荐（只引入用到的函数）：
import { debounce, throttle } from 'lodash-es';<br>const debounced = debounce(...);避免副作用干扰（关键细节）
如果工具库或你的代码中存在顶层副作用（如直接执行的函数调用、赋值、console.log），构建工具可能保守地保留整个模块。确保：
- 库的
package.json中声明"sideEffects": false（全局无副作用），或精确列出有副作用的文件（如["*.css"]） - 你自己写的工具模块中，不写顶层运行逻辑；把逻辑放在函数内，仅导出纯函数
验证是否生效
打包后检查生成的 bundle：
- 用 Webpack：开启
stats: 'verbose'或使用 webpack-bundle-analyzer - 用 Vite：运行
vite build --report生成report.html - 搜索未使用的函数名，确认其未出现在最终 JS 文件中
