umi项目打包优化

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

前言

umi打包的时候，居然用了30分钟。有必要进行压缩，经过优化后，从30分钟到4分钟。

具体方案

关键插件和umi版本：

"umi": "^3.2.24",
"compression-webpack-plugin": "^6.0.0",

在.umirc.ts文件添加

export default defineConfig({
nodeModulesTransform: {
type: 'none',
exclude: [],
},
.....
dynamicImport: {},
chunks: ['vendors', 'umi'],
chainWebpack: function (config, { webpack }) {
config.merge({
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
name: true,
minSize: 30000,
minChunks: 1,
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
priority: -12,
},
},
},
},
});
if (process.env.NODE_ENV === 'production') {
//gzip压缩
config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
{
test: /\.js$|\.html$|\.css$/, //匹配文件名
threshold: 10240, //对超过10k的数据压缩
deleteOriginalAssets: false, //不删除源文件
},
]);
}
},
theme: {},
.......
});

nginx配置支持请求压缩内容

在nginx配置文件内添加

# 开启和关闭gzip模式
gzip on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;
# 进行压缩的文件类型。
gzip_types text/plain application/Javascript application/x-Javascript text/css application/xml text/xml text/Javascript application/json;
# nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩
gzip_static on;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~