Rollup 默认支持 Tree Shaking,但需配合 ESM 语法、显式声明无副作用(如 sideEffects: false)、避免动态导入和模糊导出,并通过构建结果验证效果。

Rollup 默认就支持 Tree Shaking,无需额外开启开关,但要真正生效,关键在于代码写法和配置协同——尤其是模块导入方式、导出规范,以及是否意外引入副作用。
确保使用 ES 模块语法
Tree Shaking 只对 ESM(import/export)有效,不处理 CommonJS(require/module.exports)。如果你的源码或依赖用了 require,Rollup 会跳过分析,整块保留。
- ✅ 正确:用
export const foo = () => {}和import { foo } from './utils.js' - ❌ 避免:在入口或工具函数中混用
require('lodash');若必须用,考虑用@rollup/plugin-commonjs转换,但注意它可能阻碍 shaking
标记无副作用的模块
Rollup 默认假设每个模块都有副作用(比如执行初始化逻辑),因此即使没被引用,也可能保留。你需显式声明“这个文件纯函数、无副作用”:
- 在
package.json中加"sideEffects": false(表示整个包无副作用) - 或更精确地写成
"sideEffects": ["*.css", "*.svg"],只保留需运行的资源文件 - 在单个 JS 文件顶部加注释
/*#__PURE__*/,用于标记某个调用可被安全移除(如/*#__PURE__*/console.log('debug'))
检查输出结果是否真的被摇掉
别只信配置,要验证效果:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
- 用
rollup -c --bundleConfigAsCjs构建后,打开生成的 bundle,搜索未使用的函数名,确认不存在 - 启用
treeshake: { moduleSideEffects: false }(默认true)可进一步收紧判断,但需确保所有模块确实无副作用 - 配合
rollup-plugin-visualizer生成依赖图,直观查看哪些模块/导出未被引用
避免常见干扰项
以下情况会让 Tree Shaking 失效或降级:
-
export * from './math.js'—— 建议改为具名重导出:export { add, sub } from './math.js' - 动态导入
import(`./${name}.js`)—— Rollup 无法静态分析,整个模块会被保留 - 导出对象时用了计算属性或解构赋值:
export const obj = { [key]: value }或export const { a } = someObj,可能阻断分析 - 在
input配置里写了多个入口(如['src/index.js', 'src/cli.js']),Rollup 会对所有入口做并集分析,未被任一入口引用的代码才可能被删
不复杂但容易忽略——核心就是:用 ESM、标清副作用、少写模糊导出、多看输出结果。

















