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;
欢迎关注前端早茶,与广东靓仔携手共同进阶
前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~