create-react-app中按需加载antd的UI组件

antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。当我们使用它做为我们项目的UI库，一定会遇到按需加载的问题，在Ant Design 的官网上，给出了两种方式来解决按需加载的问题：

1. 通过手动方式引入：

import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style';         // 加载 LESS

2. 使用 babel-plugin-import
   引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

$ yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
  -   "start": "react-scripts start",
  +   "start": "react-app-rewired start",
  -   "build": "react-scripts build",
  +   "build": "react-app-rewired build",
  -   "test": "react-scripts test",
  +   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

最后我们就可以通过这样的方式来引入组件及其样式了：

import { Button } from 'antd';

3. 修改react-scripts中webpack配置
   假设你不想使用官方给出的两种方式来实现antd按需加载，恰巧你的项目又是基于create-react-app建立，那么还有第三种方式来修改，就是修改/node_modules/react-scripts/config/webpack.config.js文件来实现：

// 在babel-loader的配置中加上['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
    'babel-preset-react-app/webpack-overrides'
  ),
    .....
  plugins: [
+   ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
    [
      require.resolve('babel-plugin-named-asset-import'),
      {
        loaderMap: {
          svg: {
            ReactComponent:
            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
          },
        },
      },
    ],
  ],
  ......
}

注意：因为是直接修改node_modules里 的文件，所以如果你的项目过滤掉node_modules的话，如果重新拉取项目或者在线上构建的时候。不要忘记在react-scripts中的修改！