Babel转译React组件库后，如何保留其代码拆分效果？

这问题我之前帮团队排查过好几次，核心原因是Babel默认会把动态import()语法转译成CommonJS的require调用，而代码拆分的核心是webpack/Rollup这类打包工具要能识别import()作为代码分割的标记点——一旦被转成require，打包工具就没法识别这个分割点了，自然就失去了代码拆分效果。

下面是一步步的解决方案：

1. 调整Babel配置，保留动态import语法 #

修改库A的.babelrc或者babel.config.json，确保Babel只解析但不转译动态import()：

• 如果用了@babel/preset-env，要把modules选项设为false（禁止转译模块语法），同时添加@babel/plugin-syntax-dynamic-import插件让Babel识别动态import语法：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

注意：modules: false会让Babel保留原生的ES模块语法（包括静态import和动态import），这是让打包工具识别代码分割点的前提。

2. 把库A打包为ES模块（ESM）格式 #

不要把库A打包成单一的CommonJS文件，要保留模块的拆分结构，让项目B的打包工具能继续处理动态import。比如：

• 用webpack打包时，设置output.library.type为'module'（webpack 5+支持）：

// webpack.config.js
module.exports = {
  output: {
    library: {
      type: 'module',
    },
    filename: '[name].js',
  },
  experiments: {
    outputModule: true,
  },
  // 其他配置...
};

• 用Rollup打包时，设置output.format为'es'并保留原模块结构：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    preserveModules: true, // 不合并成单个文件，保留原模块拆分
  },
  // 其他配置...
};

3. 让项目B优先导入ES模块版本 #

在库A的package.json里添加"module"字段，指向ES模块的入口文件，这样项目B的打包工具（比如webpack、Vite）会自动优先使用这个版本，而不是CommonJS版本：

{
  "name": "library-a",
  "main": "dist/cjs/index.js",
  "module": "dist/es/index.js", // 新增ES模块入口
  "type": "module" // 如果是纯ESM库，可添加此字段明确模块类型
}

额外注意事项 #

• 不要使用@babel/plugin-transform-modules-commonjs这类强制转译CommonJS的插件，会直接破坏动态import的代码拆分能力。
• 如果库A需要兼容旧浏览器，让项目B的打包工具来处理语法降级即可，不要在库A的转译过程中把动态import转成require。
• 测试时可以查看项目B的打包产物，如果能看到拆分出来的独立chunk文件（比如1.chunk.js），就说明代码拆分已经生效。

内容的提问来源于stack exchange，提问作者欧阳维杰