antd-design4.0配置按需加載

1. create-react-app

2. 安裝antd-design

3. 配置antd按需加載

   1. antd 的 JS 代碼默認支持基於 ES modules 的 tree shaking。

   2. antd的css按需加載優化：

      1. 安裝react-app-rewired、customize-cra、babel-plugin-import

      2. npm run eject

      3. 根目錄增加config-overrides.js，並增加以下代碼：

      4. //根目錄創建config-overrides.js, 修改默認配置
         const { override, fixBabelImports } = require("customize-cra");
         
         module.exports = override(
           fixBabelImports("import", {//antd按需加載
             libraryName: "antd",
             libraryDirectory: "es",
             style: "css"
           })
         );

          

   3. 修改package.json：

   4. 　　"scripts": {
          "start": "react-app-rewired start",
          "build": "react-app-rewired build",
          "test": "react-app-rewired test",
          "eject": "react-app-rewired eject"
        },

      現在項目里可以使用
      import {Button} from 'antd'
      來按需引入antd