Tree Shaking 能删除未使用的 ES 模块工具函数，但要求具名导出、无副作用、禁用动态导入和 CommonJS；默认导出对象、顶层副作用、eval 等会导致失效。
Tree Shaking 能删掉未使用的工具函数，但前提是这些函数必须是 ES 模块（export/import）定义的、且不能有副作用。CommonJS（require/module.exports）或动态导入、运行时判断等都会让打包器无法静态分析，导致 Tree Shaking 失效。
确保工具函数以 ES 模块方式导出
使用具名导出（named export），避免默认导出对象或聚合模块：
- ✅ 推荐写法（可被 shake）：
// utils.js
export const debounce = (fn, ms) => { /* ... */ };
export const throttle = (fn, ms) => { /* ... */ };
export const deepClone = (obj) => { /* ... */ };- ❌ 不推荐（整块对象无法 shake）：
// utils.js
export default {
debounce: (fn, ms) => { /* ... */ },
throttle: (fn, ms) => { /* ... */ }
};这样即使只 import debounce，整个对象仍会被保留。
避免副作用干扰静态分析
Tree Shaking 依赖“无副作用”假设。以下行为会让打包器保守保留代码：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在顶层执行有副作用的操作（如直接调用函数、修改全局、
console.log、localStorage） - 导出变量被外部读写（如
export let count = 0） - 使用
eval()、with或Function构造函数
✅ 正确做法：工具函数保持纯函数特性，副作用逻辑移入调用处。
在构建配置中启用并验证
以 Vite 或 Webpack 5+ 为例：
- Vite 默认开启 Tree Shaking，无需额外配置
- Webpack 5+ 需确认
mode: 'production'且optimization.usedExports: true（通常默认启用） - 可通过构建后查看
dist目录产物，或使用 Webpack Bundle Analyzer 检查未引用的模块是否消失
注意：开发模式下通常不启用压缩和 Tree Shaking，务必在生产构建中验证。
慎用动态导入或条件导出
以下写法会阻断静态分析：
-
import('./utils').then(...)—— 动态导入无法被 shake，整个模块都会被打包 -
if (process.env.NODE_ENV === 'dev') export const debugUtil = ...—— 环境变量未被提前替换时，打包器无法确定分支是否执行 -
export * from './other-utils'—— 若other-utils本身不可 shake，会连带影响
若需按环境区分，建议用 define 预定义常量，并确保构建时已替换完成。
