webpack+nginx实现gzip打包解决vue首屏加载过慢
B/S结构中的压缩传输
浏览器向服务器发出请求,并且在请求头中声明可以使用gzip的编码格式,服务器接受到请求之后,读取未压缩的文件,并进行gzip算法压缩,服务器压缩完成后,再返回给浏览器gzip格式的文件,浏览器进行解压缩。这样做传输效率可能得到大幅提升,但是服务器的压缩需要时间,客户端的解压需要时间
所以我们再使用gzip的时候通常会使用webpack进行预压缩
使用webpack进行预压缩
同样的,浏览器向服务器发出请求,并且在请求头中声明可以使用gzip的编码格式,服务器接受到请求之后,读取压缩后的文件,服务器直接返回给浏览器gzip格式的文件,浏览器进行解压缩,这样以来就节省了服务器压缩的时间。
使用compression-webpack-plugin
插件对打包结果进行预压缩,可以移除服务器的压缩时间。
因为vue-cli3版本的配置文件较vue-cli2发生了很多变化,vue-cli3配置文件如下,vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
chainWebpack: (config) => {
config.plugin('compression').use(CompressionWebpackPlugin, [
{
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240, //超过多少字节进行压缩
minRatio: 0.8 //至少压缩到原来体积的0.8,才会进行压缩
}
])
},
}
如果你使用的配置文件是webpack.config.js
,则代码如下
const compressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
mode: "production",
optimization: {
splitChunks: {
chunks: "all"
}
},
plugins: [
new compressionWebpackPlugin({
test: /\.(js)|(css)$/,
threshold: 10240, //超过多少字节进行压缩
minRatio: 0.8 //至少压缩到原来体积的0.8,才会进行压缩
})
]
};
配置好前端后还要配置nginx的配置文件,在nginx.conf
的server模块中加入以下代码:
server{
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_vary on;
}
gzip代码的具体解释
#gzip模块设置
#开启压缩
gzip on;
# 设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
gzip_min_length 2k;
# 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。 例如 4 4k 代表以4k为单 位,按照原始数据大小以4k为单位的4倍申请内存。 4 8k 代表以8k为单位,按照原始数据大小以8k 为单位的4倍申请内存。
# 如果没有设置,默认值是申请跟原始数据相同大小的内存空间去存储gzip压缩结果。
gzip_buffers 4 16k;
#压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 5;
# 默认值: gzip_types text/html (默认不对js/css文件进行压缩)
# 压缩类型,匹配MIME类型进行压缩
# 不能用通配符 text/*
# (无论是否指定)text/html默认已经压缩
# 设置哪压缩种文本文件可参考 conf/mime.types
gzip_types text/plain application/xjavascript text/css application/xml;
# 值为1.0和1.1 代表是否压缩http协议1.0,选择1.0则1.0和1.1都可以压缩
gzip_http_version 1.0
# IE6及以下禁止压缩
gzip_disable "MSIE [1-6]\.";
# 默认值:off
# Nginx作为反向代理的时候启用,开启或者关闭后端服务器返回的结果,匹配的前提是后端服 务器必须要返回包含"Via"的 header头。
# off - 关闭所有的代理结果数据的压缩
# expired - 启用压缩,如果header头中包含 "Expires" 头信息
# no-cache - 启用压缩,如果header头中包含 "Cache-Control:no-cache" 头信息
# no-store - 启用压缩,如果header头中包含 "Cache-Control:no-store" 头信息
# private - 启用压缩,如果header头中包含 "Cache-Control:private" 头信息
# no_last_modified - 启用压缩,如果header头中不包含 "Last-Modified" 头信息
# no_etag - 启用压缩 ,如果header头中不包含 "ETag" 头信息
# auth - 启用压缩 , 如果header头中包含 "Authorization" 头信息
# any - 无条件启用压缩
gzip_proxied expired no-cache no-store private auth;
# 给CDN和代理服务器使用,针对相同url,可以根据头信息返回压缩和非压缩副本
gzip_vary on;
有关nginx.conf
全部配置文件可以看这篇博客:
史上最全 nginx.conf 配置文件详解
有关更多webpack中的性能优化可以看这篇博客:
企业级项目:webpack中的性能优化