React中使用Antd(样式按需加载)

一、配置Antd的css样式按需加载

  直接引入（ import './App.css' ）会加载 antd 组件的全部样式（对前端性能是个隐患），此时需要对 create-react-app 的默认配置进行自定义，使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

1、安装依赖包

   yarn add react-app-rewired customize-cra

2、修改 package.json 配置文件如下

"scripts": {
    "start": "set PORT=3001 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

3、使用 babel-plugin-import

  babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件。

  yarn add babel-plugin-import

4、项目根目录下创建一个 config-overrides.js 用于修改默认配置

  在config-overrides.js 文件中添加如下配置

 const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
 );

二、自定义主题及less文件加载配置

  自定义主题需要用到 less 变量覆盖功能。可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件。

1、安装less-load

  yarn add less less-loader

2、修改 config-overrides.js 文件

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  }),
);

三、eject

  也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。

  yarn run eject