webpack+nginx实现gzip压缩解决vue首屏加载过慢

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中的性能优化