如何对@carbon/charts-react进行Tree Shaking以按需打包RadarChart？

问题描述 #

我正在构建一个React组件库，依赖@carbon/charts-react。在其中一个组件里，我只导入了RadarChart：

import { RadarChart as RadarChartCarbon } from '@carbon/charts-react';

但运行Rollup构建时，发现整个@carbon/charts-react都被打包进产物里了。怎么才能只把用到的RadarChart组件包含进去？

以下是我的Rollup配置：

export default {
  input: 'src/index.js',
  output: [
    {
      format: 'es',
      dir: 'build',
      // preserveModules: true,
      // preserveModulesRoot: 'src',
      // sourcemap: false,
    },
  ],

  plugins: [
    peerDepsExternal(),
    typescript({
      module: 'ESNext',
      declarationDir: './build',
    }),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        'react-is': ['isForwardRef', 'isValidElementType'],
      },
    }),
    resolve({
      preferBuiltins: true,
    }),
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: ['@babel/preset-react'],
      plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]],
    }),
    postcss({
      to: './build/base.css',
      preprocessor: (content, id) =>
        new Promise(res => {
          const result = sass.renderSync({ file: id });

          res({ code: result.css.toString() });
        }),
      plugins: [url(options), autoprefixer],
      modules: {
        scopeBehaviour: 'global',
      },
      extract: 'base.css',
      use: [
        [
          'sass',
          {
            includePaths: ['./node_modules'],
          },
        ],
      ],
    }),
    json(),
    terser(),
    del({ targets: 'build/*' }),
    visualizer({
      open: true,
    }),
  ],
};

RadarChart源码来自carbon-design-system/carbon-charts仓库的对应文件

解决方案 #

1. 确保依赖支持Tree Shaking #

先检查@carbon/charts-react的package.json是否包含module字段——该字段指向库的ES模块版本，Rollup的Tree Shaking必须基于ES模块才能正常工作。如果库未提供ES模块入口，Tree Shaking会失效，导致整个库被打包。

2. 调整Rollup的Resolve配置 #

修改resolve插件配置，关闭preferBuiltins（前端组件库无需优先使用Node.js内置模块），并明确指定支持的文件扩展名：

resolve({
  preferBuiltins: false,
  extensions: ['.js', '.jsx', '.ts', '.tsx']
}),

3. 确保Tree Shaking完全启用 #

Rollup默认在es格式输出时启用Tree Shaking，但可以显式配置强化效果：
在Rollup配置根节点添加：

treeshake: {
  moduleSideEffects: false,
  propertyReadSideEffects: false,
  tryCatchDeoptimization: false
}

同时调整terser插件配置，确保保留Tree Shaking结果：

terser({
  compress: {
    unused: true,
    dead_code: true
  }
}),

4. 直接导入具体组件文件 #

如果上述方法无效，可绕过库的入口文件，直接导入RadarChart的源码文件：

import RadarChartCarbon from '@carbon/charts-react/src/charts/RadarChart';

这种方式会强制Rollup仅打包该文件及其直接依赖，避免导入整个库的入口逻辑。

5. 设为Peer Dependency（可选） #

若希望组件库使用者自行安装@carbon/charts-react，可将其添加到你的package.json的peerDependencies中：

"peerDependencies": {
  "@carbon/charts-react": "^x.y.z"
}

此时peerDepsExternal插件会自动将该依赖排除在构建产物之外，彻底避免整个库被打包的问题。

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