共计 1322 个字符,预计需要花费 4 分钟才能阅读完成。
初衷 :第一次做前端 vue 我的项目,会到很多问题很多坑,保持记录总结,也能帮忙别人 少走弯路
问题形容:打包体积过大时,晋升 web 传输性能,使浏览器不卡顿
目标: 前端对 css/js 打包压缩,后端 nginx 也打包压缩,这样节俭服务性能,在浏览器传输时,服务端没有找到.gz 文件才进行压缩,而不至于每次都压缩,耗费性能
一:前端 webpack 打包 配置
- 装置插件
npm install compression-webpack-plugin@5.0.2 -D (装置 7.0.0 版本的会报 TypeError: Cannot read property‘tapPromise‘of undefined)
2. 在 vue.config.js 中配置
configureWebpack: config => {if (IS_PROD) {// 为生产环境批改配置...
config.plugins.push(new CompressionWebpackPlugin({filename: "[path].gz[query]", // 压缩后的文件名(放弃原文件名,后缀加.gz)algorithm: "gzip", // 应用 gzip 压缩
test: productionGzipExtensions, // 正则匹配文件名
threshold: 10*1024,// 对超过 10k 的文件进行压缩
minRatio: 0.8 // 压缩率小于 0.8 才会压缩
}))
}
},
3. 执行 npm run build , 打包解决的文件如下:在 dist 下
二:后端服务器 ngnix 打包配置
1. 编辑 nginx.conf
#开启 gzip 压缩
gzip on;
#启用 gzip 压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1K;
#gzip_buffers 4 16k;
gzip 压缩级别,1-9,数字越大压缩的越好,也越占用 CPU 工夫, 个别都设置成两头值
gzip_comp_level 5;
#进行压缩的文件类型。javascript 有多种形式。其中的值能够在 mime.types 文件中找到。gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
#是否在 http header 中增加 Vary: Accept-Encoding,倡议开启
gzip_vary on;
2. 重启 nginx 后,从新流量页面,再 response header 中将会看到 Content-Encoding: gzip,ETag: W/”6103c456-91874″ 示意是服务端动静压缩加载的,若没有后面的 W /,示意间接加载的文件并没有压缩
总结:在前端打包时配置 gzip 压缩,在 nginx 服务也开启 gzip 压缩,在浏览器加载时,服务端若找不到压缩文件,符合条件则进行动静压缩
正文完