概述
使用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,页面加载时间也有所缩短。