react中项目中设置antd4.0的按需加载(修改主题)

• 什么是按需加载
  按需加载是前端性能优化的一大措施，按需加载就是根据需要去加载资源。在JS中，我们一般通过一些用户行为或者定时任务去触发一些加载动作。
• 为什么需要按需加载
  浏览器在同一时间屙屎我们内可以发出的请求数有限制，所以这也是我们采用第三方打包工具将多个文件打包为一个文件的意义。但是多个打包文件为一个文件时包有比较大，一次性下载下来的速度就比较慢，仍然会有刚进入单页面系统产生首页白屏的时间较长的情况。按需加载可较好的解决这些问题。
• react中项目中设置ant的按需加载
  (1)创建一个项目
  npm create-react-app
  (2)安装antd并引入
  安装npm i antd
  在src/App.js中引入antd
  @import '~antd/dist/antd.css'
  测试是否可用：修改 src/App.js，引入 antd 的按钮组件。
  import React,{Component} from 'react' import { Button } from 'antd'; class App extends Component{ render(){ return( <div> <Button><Button> </div> ) } }
  (3)安装 craco
  npm i @craco/craco
  (4)修改package.json文件
  "scripts": { + "start": "craco start", + "build": "craco build", + "test": "craco test", - "start":"react-scripts start", - "build":"react-scripts build", - "test": "react-scripts test", }
  注：如果想要看项目的效果，修改配置文件需要重新启动项目
  (5)在根目录下面创建一个craco.config.js,用于修改默认配置
  (6)自定义主题，先把.css,文件修改成.less,然后引用为less的文件
  (7)安装craco-less并修改craco.config.js文件
  npm i craco-less
  craco.config.js文件的修改

 const CracoLessPlugin = require('craco-less');
        module.exports = {
          plugins: [
            {
              plugin: CracoLessPlugin,
              options: {
                lessLoaderOptions: {
                  lessOptions: {
                    modifyVars: { '@primary-color': '#1DA57A' },
                    javascriptEnabled: true,
                  },
                },
              },
            },
          ],
        };

(8)在@primary-color可以修改主题的颜色，修改了配置文件，需要重新启动项目，就能看到效果
常用的样式变量
@primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 错误色 @font-size-base: 14px; // 主字号 @heading-color: rgba(0, 0, 0, 0.85); // 标题色 @text-color: rgba(0, 0, 0, 0.65); // 主文本色 @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色 @disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @border-radius-base: 4px; // 组件/浮层圆角 @border-color-base: #d9d9d9; // 边框色 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影