Ant Design按需加载

不eject情况下配置antd按需加载

1.安装 react-app-rewired

yarn add react-app-rewired

 

2. 项目根目录下新建 config-overrides.js 文件

/* config-overrides.js */

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

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

3. 修改package.json文件中的start、build、test 命令

 /* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

4. 安装以下组件

yarn add less less-loader customize-cra

5. 扩展配置选项

修改config-overrides.js文件

const {
    override,
    fixBabelImports,
    addLessLoader
  } = require("customize-cra");
  
  module.exports = override(
    fixBabelImports("import", {
      libraryName: "antd", libraryDirectory: "lib", style: true // change importing css to less
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: { 
        "@font-size-base": "12px",
        "@text-color": 'rgba(0, 0, 0, .85)'
      }
    })
  )

6. 启动开发服务

yarn start