Tree Shaking 移除未被引用的 ES 模块导出(函数、常量、类等),不处理 TypeScript 类型;需满足静态分析前提:具名导出与导入、无副作用、ESM 入口,并通过构建产物验证剔除效果。

Tree Shaking 不是“过滤接口”,而是移除未被引用的 导出(export) —— 包括函数、常量、类、类型别名(但类型本身不参与,因 TypeScript 类型在编译后被擦除)等。所谓“接口”若指 JavaScript 运行时可执行的代码(如导出的函数或对象方法),它能被摇掉;若指 TypeScript 中的 interface 或 type,则根本不会出现在最终 JS 产物中,无需也不参与 Tree Shaking。
要让未被引用的导出真正被剔除,关键不在“怎么过滤”,而在于满足静态分析前提 + 避免干扰因素:
必须用 ES 模块语法声明和引入
- 导出端:用
export function xxx()、export const yyy = ...,避免export default { a, b }这类对象聚合导出 - 引入端:用具名导入
import { xxx } from './utils',而非import * as utils from './utils'或默认导入import utils from './utils'(后者易导致整包保留)
确保模块无隐式副作用
立即学习“Java免费学习笔记(深入)”;
OpenJDK 24 Windows x64 官方参考实现(24+36),适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。
- 若某文件只执行副作用(如
axios.defaults.baseURL = '/api'),且无任何export,又没被显式 import,它可能被误删 - 解决方式:在该模块所在 package 的
package.json中声明"sideEffects": ["./src/setup.js"]
或全局无副作用时写
"sideEffects": false
第三方库需提供 ESM 入口
-
lodash是 CommonJS,不支持摇;改用lodash-es - 查看库的
package.json:有"type": "module"或"exports": { ".": { "import": "./index.mjs" } }才可靠
验证是否真被剔除
- 运行
vite build或webpack --mode production - 打开
dist/下生成的.js文件,直接搜索那个未引入的函数名(如subtract) - 结果为空 → 成功摇掉;若存在,检查是否被动态 import、
* as引入、或副作用声明遗漏
动态引入会阻断分析:
-
import('./utils.js')✅ 可分析(如果路径是字面量) -
import(./pages/${page}.js)❌ 路径不确定,整块模块保留
基本上就这些。

















