版本

{
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.18.6",
    "@craco/craco": "^7.0.0-alpha.7",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^4.21.5",
    "babel-plugin-import": "^1.13.5",
    "braft-editor": "^2.3.9",
    "compression-webpack-plugin": "^5.0.0",
    "craco-less": "^2.1.0-alpha.0",
    "craco-vtk": "^1.0.2",
    "echarts": "^5.3.3",
    "file-saver": "^2.0.5",
    "jsonp": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "5.0.1",
    "simple-progress-webpack-plugin": "^2.0.0",
    "source-map-explorer": "^2.5.2",
    "web-vitals": "^2.1.4",
    "xlsx": "^0.17.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "uglifyjs-webpack-plugin": "^1.0.0"
  }
}

配置

const CracoLessPlugin = require('craco-less');
// 打包压缩
const compressionWebpackPlugin = require("compression-webpack-plugin")
// 观察进度
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const path = require('path')
module.exports = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.plugins.push(new compressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                // test: /\.js$|\.html$|\.json$|\.css/,
                test: /\.js$|\.json$|\.css/,
                threshold: 10240, // 只有大小大于该值的资源会被处理
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                //  deleteOriginalAssets: true // 删除原文件
            }))
            webpackConfig.plugins.push(
                new SimpleProgressWebpackPlugin()
            )
            webpackConfig.devtool = false;
            // webpackConfig.module.rules.push({
            //     // test: /\.jsx$/, // 对js文件使用babel
            //     // loader: 'babel-loader',
            //     include: [path.resolve('src')],// 只在src文件夹下查找
            //     // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
            //     exclude: /node_modules/
            // });
            webpackConfig.optimization.splitChunks = {  // 自行切割所有chunk
                chunks: 'all'
            }
            return webpackConfig;
        }
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    }
};