Vue开启gzip压缩文件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件，减少项目体积后，还是觉得项目加载速度慢，效果不尽如人意的时候，还有一个“瘦身项目”可以完成，那就是利用nginx和webpack来使用gzip压缩功能。

通常来讲更小的体积就意味着更快的加载速度，也就对应着更好用户体验。整个过程大体分为两步，废话不多讲，开始

一、 webpack插件 compression-webpack-plugin

Vue压缩功能的实现主要依赖于webpack的一个插件compression-webpack-plugin，这个插件可以将npm run build之后的.js .css（看自己配置）文件，打包成.js.gz .css.gz文件。

首先需要安装compression-webpack-plugin依赖

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

这里推荐使用1.1.2版本，因为高版本的插件在使用时会报ES6语法错误。下载此插件时可能需要翻墙，可以使用下方命令配置npm 代理

npm config set proxy http://username:password@ip:port

之后需要打开项目中的prductionGzip选项，具体路径在config/index.js build下：

打开之后还需要配置bulid/webpack.prod.conf.js 文件，找到下图所示位置将asset更换为filename:

至此，vue部分的配置完成。可以使用npm run build检验一下是否配置成功，如果配置没有问题打包结果与下图应该是比较类似的：

像这些xxxxxx.js.gz就是打包之后的文件了，可以看到压缩率还是比较可观的

二、nginx配置

在配置完Vue部分后直接部署到nginx上是不会生效的，还必须打开nginx的gzip功能才可以。这里以nginx-1.13.0为例，首先需要确认当前nginx是否拥有

gzip模块，一般情况下都会默认安装对应。运行以下命令

nginx -V
返回结果中会包含当前nginx启用了那些模块

如果返回结果中不包含gzip模块的话，可以重新编译nginx并安装相对应模块，找到nginx源码文件包，运行

./configure --with-所需要安装的模块名

命令运行成功后执行make命令，千万不要执行make install！执行make install会直接将之前安装的nginx给覆盖掉。

make命令执行成功之后会在objs目录下生成nginx可执行文件，直接使用此nginx替换掉原本的nginx即可。

在确认模块安装完毕之后，修改conf/nginx.conf文件，加入如下内容

#开启gzip功能
gzip on;
#开启gzip静态压缩功能
gzip_static on;
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

配置完毕之后重启nginx即可

三、验证配置结果

nginx配置成功之后，再次访问对应网站返回的应该是对应的gzip资源，可以利用chrome查看返回结果