在create-react-app 中 npm run eject暴露配置之后，配置按需加载和less-loader的方法

使用create-react-app创建项目

首先使用create-react-app创建项目

create-react-app my-app

进入项目

cd my-app

暴露出配置

npm run eject

配置less （先安装npm i less@^2.7.3 less-loader）

// 找到这里
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//添加两行
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;

//找到此位置
 {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
//这里进行添加
// Less 解析配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              )
            },

按需加载antd（npm i babel-plugin-import）便于前端性能优化

//找到 oneOf下面的test:/\.(js|mjs|jsx|ts|tsx)$/, 然后再plugins里面添加代码：
 test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),

//在plugins里添加
[
                    'import',{"libraryName":"antd",style:true}
                  ]