Tree Shaking 依赖 ES6 静态模块机制,通过 import/export 实现未使用代码的移除。构建时需使用支持该特性的工具(如 Webpack),并配置生产模式与正确的 sideEffects 标记以确保优化生效。

树摇(Tree Shaking)是一种在构建阶段移除JavaScript中未使用代码的优化技术,它依赖于ES6模块系统的静态结构来工作。也就是说,只有通过 import 和 export 声明的模块才能被有效摇动。
基于静态分析的工作机制
Tree Shaking 能够生效的关键在于 ES6 模块是静态的:导入和导出在代码执行前就已经确定,不能动态修改。这使得打包工具如 Webpack 或 Rollup 可以在编译时准确分析哪些函数或变量被实际使用。
例如:- 如果你从一个工具库中只引入了一个函数,比如 import { add } from './math',而没有使用 subtract,打包器就能知道 subtract 从未被引用。
- 在生产构建中,未被引用的函数将被标记为“无用”并从最终输出中剔除。
需要支持的构建环境
Tree Shaking 并不是 JavaScript 运行时的行为,而是构建工具与编译流程协同的结果。要实现有效的树摇,需满足几个条件:
- 使用 ES6 模块语法(import/export),CommonJS(require)不支持树摇。
- 构建工具配置为生产模式(如 Webpack 中 mode: 'production'),启用压缩和摇树优化。
- 确保第三方库的 package.json 中有 "sideEffects": false 或正确标注副作用文件,帮助打包器判断哪些模块可以安全删除。
副作用的影响
如果一段代码在导入时会立即产生行为(如修改全局对象、注册事件监听等),就被视为具有“副作用”。这类代码即使没有显式使用,也不能被安全移除。
立即学习“Java免费学习笔记(深入)”;
例如:- import './polyfill.js' 可能会扩展原生对象,虽然没有返回值,但必须保留执行。
- 通过 sideEffects 字段告诉打包器哪些文件有副作用,避免误删。










