React中使用Antd 4.x组件库时，如何按需加载

阿里的react组件库Antd，默认情况下：组件的js是支持按需引入，但css并不支持按需引入，即默认情况下Antd的CSS样式被整体引入，但开发中为了减少打包的体积，我们通常需要自己设置来让css也支持按需引入

方案一：手动引入要使用的组件css样式，例如引入Antd组件库的input组件

// 引入 Input 组件
import 'antd/es/input/style/css'; // 手动按需引入input样式
import { Input } from 'antd'; // 引入 Input 模块（注意这里是自动按需引入的，不会将整个antd.js文件引入）

• 如上所述，每使用一个组件，就需要引入该组件需要的js和css,实在有些麻烦，那有没有什么办法，让引入模块后，自动按需引入对应的css样式呢

方案二：使用bable-plugin-import插件，实现自动引入要使用的组件的css样式

• 使用webpack里配置babel-plugin-import，便可实现在webpack打包时，自动引入打包模块按需引入，并且将相关联的css样式也按需引入，但因为官方react脚手架默认隐藏了webpack配置，所以我们需要react-app-rewired和customize-cra来开启react的webpakc配置

  1. NPM安装插件

  # 安装插件 react-app-rewired customize-cra babel-plugin-import 这3个插件
  npm install react-app-rewired customize-cra babel-plugin-import -D
  

  2. 在项目根目录下，新建文件config-overrides.js，并设配置其内容

  // 项目根目录下，新增文件 config-overrides.js
  const { override, fixBabelImports } = require('customize-cra');
  
  module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  );
  

  3. 修改根目录下package.json文件

  // 找到 "scripts" 属性，并修改其属性值（将原来的 react-scripts 改为 react-app-rewired ）
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  

  4. 至此，react中支持了antd组件库的自动按需引入，如下

  // 引入 Input 组件
  import { Input } from 'antd'; // 直接引入模块即可（样式和模块，都会自动按需引入）
  

  • 当然自动按需引入还有其他方案，比如也使用npm run eject直接反编译react，让其webpack配置暴露出来