分享一个用@craco配置cra项目webpack的优化

//craco.config.js
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;
module.exports = {
  reactScriptsVersion: 'react-scripts' /* (default value) */,
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.optimization.splitChunks.cacheGroups = {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        src: {
          minChunks: 1,
          test: /[\\/]src[\\/]/,
          priority: -1,
          reuseExistingChunk: true,
        },
        echarts: {
          name: 'chunk-echarts',
          priority: 20,
          reuseExistingChunk: true,
          test: /[/]node_modules[/]_?echarts(.*)/
        },
        lodash: {
          name: 'chunk-echarts',
          priority: 20,
          reuseExistingChunk: true,
          test: /[/]node_modules[/]_?lodash(.*)/
        },
      };
      return webpackConfig;
    },
    plugins: [new BundleAnalyzerPlugin()],
  },
  babel: {
    plugins: [
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true,
        },
      ],
    ],
  },
};


复制代码