为何我的Rollup打包React组件库无法被Tree Shaking？

我来帮你排查Tree Shaking失效的问题，结合你的配置和代码来看，主要有几个关键原因，咱们逐个拆解：

1. Rollup打包成单一文件，限制了Webpack的Tree Shaking能力 #

你的Rollup配置把所有组件打包成了单个ES模块文件（index.es.js），这是最可能的核心问题。

当Webpack消费这个单一文件时：

• 哪怕你只导入了Theme和Badge，Webpack也必须先加载整个文件的内容
• 如果文件里未被使用的组件存在任何Webpack判定为“副作用”的代码（比如组件内的console.log、全局变量修改，甚至styled-components的某些生成逻辑），Webpack会认为这些代码不能安全移除，直接导致Tree Shaking失效

解决方案： #

在Rollup的output配置中添加preserveModules: true，让Rollup保留每个组件的独立模块结构，而不是打包成一个大文件：

output: [
  {
    file: pkg.module,
    format: 'es',
    preserveModules: true, // 新增：保留独立模块
    preserveModulesRoot: 'src', // 可选：保持和src一致的目录结构，更清晰
  },
]

打包后，dist目录会和src结构对应，每个组件都是单独的ES模块文件。这样Webpack可以只加载你实际用到的组件文件，Tree Shaking的效率会大幅提升。

2. 检查组件代码中的隐藏副作用 #

虽然你在package.json里设置了sideEffects: false，但组件内部的一些代码可能被Webpack误判为有副作用：

• 组件顶部直接执行的语句（比如console.log('组件加载了')、全局变量赋值）
• 类组件构造函数里的非初始化逻辑（比如调用外部API）
• styled-components的部分高级用法（比如动态生成全局样式）

解决方案： #

• 移除组件内不必要的直接执行代码
• 对于必须保留的逻辑，封装到组件的渲染函数或useEffect中，确保只有组件被使用时才执行
• 手动为纯函数/组件添加/*#__PURE__*/注释，帮助Webpack识别无副作用代码

3. 确认Babel配置没有破坏ES模块结构 #

你的Babel配置整体没问题，但要注意：

• 不要使用@babel/preset-env的modules: "commonjs"选项（你当前没用到这个preset，所以没问题），因为CommonJS语法（require/module.exports）无法被Tree Shaking
• 检查pureanno插件是否正常工作：查看打包后的代码，组件定义前是否有/*#__PURE__*/注释，这能帮助Webpack识别可移除的无副作用代码

4. 验证消费端的Webpack配置 #

Create React App的生产构建默认开启Tree Shaking，但要确保：

• Webpack优先加载你的ES模块版本：你的package.json已经设置了module字段指向ES模块文件，Webpack 4+会自动优先使用这个字段，这部分是正确的
• 确认依赖安装正确：确保my-react-component-library的版本是你打包的最新版，且dist/index.es.js确实是ES模块格式（不是CommonJS）

5. 正确验证Tree Shaking效果 #

有时候你可能误判Tree Shaking没生效：

• 使用source-map-explorer分析时，注意区分“被打包但未被使用”和“实际被调用”的代码
• 可以做个测试：只导入一个组件，然后查看构建包是否只包含该组件的代码，而不是整个组件库

内容的提问来源于stack exchange，提问作者borisdiakur