前端性能优化三十九:花裤衩模板gzip的webpack配置
1. 配置:
(1). 安装插件:
①. 安装 compression-webpack-plugin:
yarn add compression-webpack-plugin@6.1.1 -D
②. 新版本 7.x 会报错:
a. Cannot read property 'tapPromise' of undefined
(2). 在 vue.config.js 中配置:
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
chainWebpack(config) {
...
// 方式一:
config
.when(process.env.NODE_ENV === 'production',
config => {
config
.plugin('compression')
.use(CompressionPlugin)
.tap(() => [{
test: /\.js$|\.html$|\.css$/, // 匹配文件名,开启js、css压缩
filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 是否删除未压缩的源文件(不设置或设置为false)
// 保留非gzip的资源,删除打包后的gz后还可以加载到原始资源文件,建议不要设置为true
}])
}
)
// 方式二:
if (process.env.NODE_ENV === 'production') {
config.plugin('compression-webpack-plugin')
.use(new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
}))
}
}
}
①. test 另种写法:
const productionGzipExtensions = ['html', 'js', 'css']
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$')
②. 打包后目录会多出 .gz 文件:
-rw-r--r-- 1 xx staff 42756 3 28 23:01 app.9c5d6e51.js
-rw-r--r-- 1 xx staff 14495 3 28 23:01 app.9c5d6e51.js.gz
-rw-r--r-- 1 xx staff 14072 3 28 23:01 chunk-19edcdf1.2e318185.js
-rw-r--r-- 1 xx staff 4791 3 28 23:01 chunk-19edcdf1.2e318185.js.gz
// 有些没有gz是因为大小没有超过设定的10k
-rw-r--r-- 1 xx staff 11 3 28 23:01 chunk-47179b48.01af0134.js
...
③. 打包只有一个没有名称的 .gz 文件,并提示:
warning
Conflict: Multiple assets emit different content to the same filename static/js/.gz
...
-rw-r--r-- 1 xx staff 48K 3 29 10:39 .gz // 没有名字的gz文件
-rw-r--r-- 1 xx staff 39K 3 29 10:39 app.3c690d0c.js
a. 要修改 filename 的设置为 filename ,老版本为'[path].gz[query]'.
(3). 服务器开启 gzip:
server {
// 表示静态加载本地的gz文件
// 浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件
// 服务器会根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件.
// gzip_static开启后,nginx就会读取预先压缩的gz文件,可以减少每次请求进行gzip压缩的CPU资源消耗
gzip_static on;
gzip_http_version 1.1;
}
(4). 检查是否开启Gzip成功:
curl -I -H "accept-encoding: gzip, deflate" "https://admin.chaidoudou.cn/static/css/chunk-elementUI.a8b08852.css"
HTTP/2 200
server: nginx/1.14.0 (Ubuntu)
date: Tue, 30 Mar 2021 15:59:15 GMT
content-type: text/css
content-length: 33216
last-modified: Tue, 30 Mar 2021 08:15:15 GMT
etag: "6062de13-81c0"
content-encoding: gzip
(4). 看Network:
如果发现两个大小不一样,表示Gzip压缩过
2. 分析:
(1). gzip 压缩比率:
①. 压缩前:
a. 整个页面加载完是 8.89s.
b. 最大的 js 文件加载是 8.31s ,大小为 593k.
②. 压缩后:
a. 整个页面加载完是 2.21s.
b. 最大的 js 文件加载是 1.75s,大小为 146k.
③. gzip 压缩比率在 4 倍左右.
压缩前:
压缩后:
(2). Request、Response 比对:
①. Request Headers:
a. Accept-Encoding: gzip, deflate:
(1). 表示用户浏览器支持二种压缩,包括 gzip 的压缩方式.
(2). deflate 与 gzip 使用的压缩算法几乎相同.
压缩前的 request:
压缩后的 request:
(3). 其它:
②. nginx 配置了静态 gz 加载后,请求文件变小不会导致请求卡线程.
③. 保留了源文件,当删除 gz 后,浏览器会自动去请求原始文件,不会导致界面出现任何问题.
④. 静态加载 gz 文件的响应头:
Content-Encoding: gzip