Vue项目开启gzip压缩

转载于：Vue项目开启gzip压缩

做了很多Vue项目，都有一个通病，随着代码越来越庞大，首页加载越来越慢，有时候出去演示，网络不好的时候，转半天，登录页面还没有出来。这主要是一些大的js文件造成的，这就是Vue的缺点吧，所有的代码都打包到一个JS文件里，网络传输太慢，有的项目都十几兆。

gzip的本质，个人觉得是在build的时候打包两份代码，一份压缩的，一份未压缩的，然后nginx在接收请求时，优先选择压缩后的格式返给客户端。

这里主要测试了使用gzip进行压缩，来压缩js和css文件大小，提升加载速度。

配置Vue项目

1.安装依赖，注意其他版本打包时会报错

npm install --save-dev compression-webpack-plugin@1.1.12
2.修改build/webpack.prod.conf.js文件内的"asset"为"filename"

3.修改config/index.js中build下的配置，增加如下代码

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

如果看到打包后的static文件夹下有.gz结尾的文件就是成功了

配置Nginx

在nginx的配置里增加

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启       
gzip_vary on;

然后重新让nginx加载配置
nginx -s reload

效果测试

在一个nginx上发布了两个网页，一个压缩过的，一个未压缩的，代码是一样的。测试对比，加载时间从4s缩短到2s，效果还是非常明显的。

未压缩前

压缩后