create-react-app + antd-design配置按需加载

3,667 阅读1分钟
  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,并增加以下代码:

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

        "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-app-rewired eject"
          },
        
  4. 现在项目里可以使用

    import {Button} from 'antd'
    

    来按需引入antd