vue项目如何开启gzip压缩

为什么要开启gzip压缩？

为了解决页面白屏时间长的问题

gzip压缩有几种方式呢？

有两种：

• 让服务器压缩：当浏览器发送请求时，服务器进行实时压缩，返回浏览器
• webpack打包时，进行压缩，浏览器请求时，服务端进行一些配置，返回压缩文件

两种用那种好呢

第一种，因为是实时压缩，所以非常耗服务器性能
第二种，就是dist打的包会偏大
所以，两者综合起来会更好

思路：webpack打包时，当文件体积超过一定程度的时候，进行gzip压缩，生产同名的.gz文件，然后配置nginx，让浏览器请求的时候，如果有.gz文件，返回压缩文件，没有的话，进行实时的压缩

webpack的配置

1. 安装一个包，然后加上配置即可

npm install --save-dev compression-webpack-plugin@1.1.2

2. 在vue.config.js里加上配置如下

module.exports = {
  chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
        config.plugin('CompressionPlugin').use(
        	new CompressionWebpackPlugin({
            test: /\.(js|css)$/,
            threshold: 10240, // 超过10kb的文件就压缩
      			deleteOriginalAssets:true, // 不删除源文件
      			minRatio: 0.8
          })
        )
   	}
  }
}

3. 然后当我们运行npm run build之后你就会发现dist里除了以前的文件以外会有很多同名的gz文件，而且体积小了很多，这就是压缩后的了

nginx的配置

1. 检查nginx模块

首先要检查一下nginx的模块，找到nginx的q启动文件，我的是/usr/sbin/nginx，如果你找不到可以使用ps -ef | grep nginx命令找到master进程所在的目录，进入sbin目录然后执行./nginx -V，注意是大写的V，查看结果如下：

第一行是nginx的版本，我的是1.16.1，重点是最后一行，我的nginx安装了很多模块，其中我们需要的就是红框部分–with-http_gzip_static_module，有的话那就不需要下面的步骤了，可以直接跳到第2步，如果没有那就继续往下看。

1.1 加入模块重新编译
如果我们在上面步骤里发现nginx没有gzip_static模块的话，那就需要我们重新编译安装一下nginx。

首先需要找到nginx的源码路径，如果不知道可以执行find / -name nginx查找，我的在/usr/local/nginx-1.16.1，然后cd到这个目录，可以先使用ll命令看一下有没有configure文件，如果有说明源码目录找对了，如果没有则再查找一下，实在找不到那就说明源码已经被删了，那就只能卸载当前nginx整个重装了。

如果第一步看到的nginx已有一些模块，则需要把这些已有的模块复制下来，然后再后面加上–with-http_gzip_static_module，执行如下命令：

./configure --prefix=/usr/share/nginx --modules-path=...[整个复制]... --with-http_gzip_static_module

如果第一步看到的一个模块都没有的话，那就直接重新编译，注意 --prefix=后面写ng所在路径：

./configure --prefix=/usr/share/nginx --with-http_gzip_static_module

1.2 安装
执行命令，进行安装

make

1.3 备份
为了确保安全，将旧的nginx做一个备份（目录如果不一样记得更换）

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

1.4 覆盖原来的nginx
先把nginx服务停止掉

ps -ef | grep nginx

找到master进程并且将其kill掉。
复制安装好的新的nginx文件覆盖旧的：

cp ./objs/nginx /usr/local/nginx/sbin/

1.5 验证
查看模块，如果出现 gzip_module说明安装成功。

/usr/local/nginx/sbin/nginx -V

2. 添加gzip配置

一般是在http里面加，也可以在某个server里加，其中：gzip_static on; 是为了命中dist里的gz文件，其他的配置是服务器实时压缩配置，一般两种都写上，有静态gz文件的会优先返回gz文件，没有的话就会开启实时压缩，实时压缩是比较耗服务器资源的。

http {
	gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
}

附录：

# 开启服务器实时gzip
  gzip on;
  
  # 开启静态gz文件返回
  gzip_static on;
  
  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;
  
  # 设置压缩所需要的缓冲区大小     
  gzip_buffers 32 4k;

# 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;

  # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
  gzip_comp_level 7;

  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain 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;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";