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 }) {
<({
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
name: true,
minSize: 30000,
nginx部署前端项目minChunks: 1,
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
priority: -12,
},
},
},
},
});
if (v.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;
欢迎关注前端早茶，与⼴东靓仔携⼿共同进阶
前端早茶专注前端，⼀起结伴同⾏，紧跟业界发展步伐~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。