阿里的react組件庫Antd，默認情況下：組件的js是支持按需引入，但css并不支持按需引入，即默認情況下Antd的CSS樣式被整體引入，但開發(fā)中為了減少打包的體積，我們通常需要自己設置來讓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插件，實現(xiàn)自動引入要使用的組件的css樣式

• 使用webpack里配置babel-plugin-import，便可實現(xiàn)在webpack打包時，自動引入打包模塊按需引入，并且將相關聯(lián)的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，并設配置其內(nèi)容

  // 項目根目錄下，新增文件 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配置暴露出來