当前位置：首页 > React

react antd如何分开打包

2026-01-25 13:50:48React

分开打包 React 和 Ant Design 的方法

使用 Webpack 的 externals 配置
将 Ant Design 作为外部依赖（externals），避免将其打包到主 bundle 中。在 webpack.config.js 中添加以下配置：

externals: {
  'antd': 'antd',
  'react': 'React',
  'react-dom': 'ReactDOM'
}

通过 CDN 引入 Ant Design
在 HTML 模板中直接通过 <script> 标签引入 Ant Design 的 CDN 资源，例如：

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/antd@4/dist/antd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4/dist/antd.min.css" />

按需加载组件
结合 babel-plugin-import 实现按需加载，减少打包体积。安装插件后，在 babel.config.js 中配置：

plugins: [
  ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
]

动态导入（Code Splitting）
使用 React 的 lazy 和 Suspense 动态加载 Ant Design 组件：

const Button = React.lazy(() => import('antd').then(module => ({ default: module.Button })));

构建多入口配置
在 Webpack 中配置多个入口文件，将 Ant Design 和业务代码分开打包：

entry: {
  main: './src/index.js',
  antd: ['antd']
}

输出分包配置
通过 optimization.splitChunks 将公共依赖提取到单独的文件：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      antd: {
        test: /[\\/]node_modules[\\/]antd[\\/]/,
        name: 'antd',
        priority: 10
      }
    }
  }
}