vue cli3开启gzip，nginx配置直接使用已经压缩好的文件(文件名为加.gz)

vue cli3开启gzip，nginx配置直接使用已经压缩好的文件(文件名为加.gz)

上面会提示当前安装版本与当前项目下的webpack版本使用不匹配，需要安装对应的版本 (6)后台取compression-webpack-plugin官网看了一下历史版本，取了一个较低版本试了试。 果然是版本冲突 执行 >npm install –save-dev compression-webpack-plugin@1.11.2 然后打包成功。 如果出现打包失败，请检查你的compression-webpack-plugin 打包插件版本，我用的3.1.0 亲测可用

前言：vue cli3的性能优化里面，开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件；当用nginx做服务器时，nginx通过_gzip on;_配置可对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu；而且webpack打包时已经生成了压缩文件，完全没必要重新通过nginx再压缩一下。发现这个问题后，通过半天的资料查询找到了答案：**nginx gzip static静态压缩，**下面把我解决的过程记录一下。

一、配置vue cli3 gzip

1. const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)
3. module.exports = {
4. configureWebpack: config => {
5. // 开发环境不需要gzip
6. if (process.env.NODE_ENV !== ‘production’) return
7. config.plugins.push(
8. new CompressionWebpackPlugin({
9. // 正在匹配需要压缩的文件后缀
10. test: /\.(js|css|svg|woff|ttf|json|html)$/,
11. // 大于10kb的会压缩
12. threshold: 10240
13. // 其余配置查看compression-webpack-plugin
14. })
15. )
16. }
17. }

二、安装nginx ngx_http_gzip_module模块

• 先下载nginx
• cd /nginx解压目录
• ./configure –prefix=/usr/local/nginx –with-http_gzip_static_module
• 上面的/usr/local/nginx为nginx安装目录，可根据自己喜好修改
• make
• make install

三、配置nginx

找到/usr/local/nginx/conf/nginx.conf，并添加下面代码

1. server {
2. listen 4300;
3. server_name localhost;
4. location / {
5. root /home/static/web/wechat;
6. index /index.html;
7. try_files uri uri/ /index.html;
8. gzip_static on; #静态压缩
9. }
10. }

启动nginx服务：./nginx -c /usr/local/nginx/conf/nginx.conf

四、查看效果

1.打包后文件

vue cli3开启gzip，nginx配置直接使用已经压缩好的文件(文件名为加.gz)-麒麟博客

2. 浏览器访问资源结果

vue cli3开启gzip，nginx配置直接使用已经压缩好的文件(文件名为加.gz)-麒麟博客

vue cli3开启gzip，nginx配置直接使用已经压缩好的文件(文件名为加.gz)-麒麟博客

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com