react+antpro 打包后生成大体积文件之优化

概述

使用antpro 框架做了一个react 项目，打包后umi.js文件体积差不多有1.4M。后来使用gzip压缩方式，将其压缩到421kb，大大缩短加载时间。

查看项目文件大小

可以通过两种方式，查看具体产生了哪些大文件。

1. 使用开发者工具的Network，可以查看浏览器加载了哪些文件及用时。

2. 使用npm 自带的分析工具，运行命令后后自动弹出分析结果网页。

npm run analyze

Stat -- 转换前的体积

Parsed -- 最终打包体积

Gzipped -- 使用gzip压缩后的体积

如果打包时能够使用gzip的话，体积就能缩小3倍。

解决方法，使用gzip

1. 安装插件 最初没有指定版本，下载的是7以上的最新版，打包时报错，指定为5.0.1这个版本解决报错问题。

npm i compression-webpack-plugin@5.0.1 -S

2.在config/config.js中修改chainWebpack。antpro原本就配置的有chainWebpack，需要保留之前的内容，追加gzip配置，否则会另外打包出奇奇怪怪的大文件。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const prodGzipList = ['js', 'css'];

export default defineConfig({
    ...
    chainWebpack: config => {
        ...    
        // 以下为gzip配置内容
        if (process.env.NODE_ENV === 'production') {  // 生产模式开启
            config.plugin('compression-webpack-plugin').use(
                new CompressionWebpackPlugin({
                    // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
                    algorithm: 'gzip', // 指定生成gzip格式
                    test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
                    threshold: 10240, //对超过10k的数据进行压缩
                    minRatio: 0.6 // 压缩比例，值为0 ~ 1
                })
            );
        }
    }
});

3.打包。打包后查看dist文件夹下，会发现部分文件同时有.js和.gz两个格式，到此，前端完成。

npm run build

同时还需服务器配置gzip。

成功后查看效果。打开Network，可以看到umi.js已经压缩到421kb，实际大小为1.4M，页面加载时间也有所缩短。