tree shaking 有效需满足三条件:纯 esm 语法、显式声明副作用、使用支持 esm 的第三方库;禁用 babel 转译、采用具名导入、验证构建产物。

要在 ES 模块中真正发挥 Tree Shaking 的作用,关键不是“写了 import/export”就行,而是让构建工具能准确识别哪些导出被使用、哪些没被引用,并安全剔除后者。它依赖代码写法、模块规范和构建配置三者协同。
确保使用纯 ESM 语法
Tree Shaking 只对静态可分析的 import/export 生效。CommonJS(require/module.exports)在运行时才确定依赖,无法静态分析,会被完全跳过。
- 所有模块必须用
export function xxx()或export const xxx = ...,避免export default { a, b, c }这类对象打包形式 - 引入时优先用具名导入:
import { debounce } from 'lodash-es',而非import _ from 'lodash' - 禁用 Babel 将 ESM 转为 CJS:在
@babel/preset-env中设置modules: false,否则会破坏静态结构
声明副作用以避免误删
有些文件虽然没导出任何东西,但执行时会修改全局、注入样式或打日志——这类“副作用”若未声明,Tree Shaking 可能把它整个删掉,导致功能异常。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在
package.json中明确标注:"sideEffects": false表示无副作用;或写成数组如"sideEffects": ["*.css", "src/polyfill.js"],只保留指定文件 - 避免在模块顶层写
console.log('init')、document.body.classList.add(...)这类无导出却有影响的代码 - 样式文件(如
import './index.css')默认被视为有副作用,需在sideEffects中显式列出才能保留
选用支持 ESM 的第三方库
即使你代码全用 ESM,如果依赖的库本身是 CommonJS 或 UMD 包装,Tree Shaking 也无从下手。
- 检查库的
package.json是否包含"module": "dist/index.esm.js"字段,这是 ESM 入口标识 - Lodash 推荐用
lodash-es替代lodash;日期库可用date-fns(原生 ESM)而非moment - 对 Bootstrap 等传统库,优先找官方提供的 ESM 版本,或通过插件(如
unplugin-auto-import)配合按需引入
验证是否真正生效
别只靠推测,动手验证最可靠:
- 构建后查看产物文件,搜索某个明显未使用的函数名,确认它没出现在最终 bundle 中
- 用
webpack-bundle-analyzer或 Vite 的build.report生成可视化报告,观察模块依赖与剔除情况 - 临时加一行
import { unusedHelper } from './utils';,再对比构建体积变化——不变说明已被摇掉
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










