Antd React UMI 配置优化 - 优化打包体积，提高打包速度

为了优化 UMI 项目中使用 Ant Design 的 React 组件的打包体积和提高打包速度，可以尝试以下方法：

1. 按需加载 Ant Design：使用 babel-plugin-import 插件来实现按需加载组件。

   安装 babel-plugin-import 插件：

   
   
   
   npm install babel-plugin-import --save-dev

   在 .umirc.ts 或 config/config.ts 文件中配置：

   
   
   
   export default {
     babelPlugins: [
       ['import', { libraryName: 'antd', style: true }], // `style: true` 表示引入样式
     ],
     // 其他配置...
   };

2. 使用 Tree Shaking：确保你的项目中使用了 ES6 的 import/export 语法来导入组件。

3. 使用 webpack 的 DllPlugin 和 DllReferencePlugin 预构建依赖：将常用的依赖库（如 react, react-dom, antd 等）打包成一个动态链接库（DLL），在后续构建中只需引用这个 DLL 文件，而不是每次都重新构建这些库。

   配置 DLL 插件的步骤如下：

   a. 创建一个单独的 webpack 配置文件，例如 webpack.dll.config.js。

   b. 在该配置文件中使用 DllPlugin 来生成 manifest 文件和 DLL 文件。

   c. 在主要的 webpack 配置文件中使用 DllReferencePlugin 来引用 DLL 文件和 manifest 文件。

   d. 运行 webpack 构建 DLL 文件，然后正常构建应用。

4. 优化 Babel 配置：根据项目需要配置 @babel/preset-env 和 babel-plugin-import 插件的选项，以减少打包体积和提高编译速度。
5. 使用 webpack 的 cache-loader：可以缓存编译结果，加快重新编译的速度。
6. 使用 thread-loader：可以将某些耗时的 loader 放在 worker 池中运行，从而使用多核cpu进行加速。
7. 使用 hard-source-webpack-plugin：为模块提供中等大小的缓存，可以显著加快构建速度。
8. 优化 Source Map：在生产环境中可以关闭或减少 source map 的大小和精确度，以加快编译速度。

这些方法可以根据项目具体情况进行组合使用，以达到优化打包体积和提高打包速度的目的。