craco打包优化

本质还是webpack

1.查看包体积

使用webpack-bundle-analyzer进行分析

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 
 new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        analyzerHost: '127.0.0.1',
        analyzerPort: 8888,
        openAnalyzer: true, // 构建完打开浏览器
        reportFilename: path.resolve(__dirname, `analyzer/index.html`), 
    }),

2 使用splitChunks拆分代码

plugins:[],
configure: (webpackConfig, { env: webpackEnv, paths }) => {
            webpackConfig.optimization.splitChunks = {
                ...webpackConfig.optimization.splitChunks,
                cacheGroups: {
                    base: {
                        // 基本框架
                        chunks: 'all',
                        test: /(react|react-dom|react-dom-router|axios)/,
                        name: 'base',
                        priority: 100,
                    },
                    moment: {
                        test: /[\\/]node_modules[\\/]moment[\\/]/,
                        name: 'moment',
                        priority: 90,
                    },
                    // echarts: {
                    //     test: /(echarts)/,
                    //     name: 'echarts',
                    //     priority: 100,
                    // },
                    commons: {
                        chunks: 'all',
                        // 将两个以上的chunk所共享的模块打包至commons组。
                        minChunks: 2,
                        name: 'commons',
                        priority: 80,
                    },
                },
            };
            return webpackConfig;
        }

3.使用babel-plugin-import按需引入

 babel: {
    plugins: [
      // 配置 babel-plugin-import ant按需加载
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'true',
        },
        'antd',
      ],
      [
        'import',
        {
          libraryName: 'moment',
          libraryDirectory: 'es',
          style: 'true',
        },
        'moment',
      ],
    ],

使用图片懒加载 LazyLoadImage

yarn add react-lazy-load-image-component

css异步加载

css文件的加载是会block网站渲染的 因此我们可以把css异步加载 具体方法

<link href="73131f5.css" rel="stylesheet" media="jscourse" onload="this.media='all'" />