vue-cli + nginx项目开启gzip压缩

Posted 2021-04-11 梄木

gzip 简介

gzip 是 Web 世界最广泛的文件压缩算法，已经得到了绝大多数的服务端和客户端软件（例如我们使用的浏览器）的支持。gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要。

压缩前后的文件大小

nginx 中开启 gzip 的两种方式

1.  在 nginx 中实时用 gzip 压缩文件输出；

利用 nginx 中的模块 

ngx_http_gzip_module， 

消耗 CPU 来做压缩，nginx配置如下：

http{ gzip on;  gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 8; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; gzip_vary on; gzip_disable "MSIE [1-6]\.";}

2. 事先用 gzip 压缩好文件（.gz）让 nginx 根据请求来自己选择 .gz 文件输出；

利用 nginx 中的模块 

http_gzip_static_module，

不消耗 CPU 资源，nginx配置只需要在上述里面加入一行即可，如下：

gzip_static on;

注意：

nginx 中的模块 

http_gzip_static_module 

默认是不在的，官网解释如下：

This module is not built by default, it should be enabled with the--with-http_gzip_static_moduleconfiguration parameter.

所以我们要记得在 nginx 中添加上 

http_gzip_static_module 模块

（https://www.cnblogs.com/caicaizi/p/10241700.html）

此种方式是推荐的办法，但是这样我们就需要事先去准备压缩好后的 gzip 文件了，在 vue-cli项目中。

如何在vue-cli 项目中打包生成 gzip 压缩文件？

vue-cli 是我们快速创建 vue 项目最好用的助手，但是目前里面没有提供打包时候生成 .gz 压缩文件。

办法其实很简单，如下：

先用 npm 安装 webpack 插件 

compression-webpack-plugin， 然后在 Vue-cli 配置文件 vue.config.js 里面加入代码如下：

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css)$/,// 匹配文件名 threshold: 10240, // 对超过10k的数据压缩 deleteOriginalAssets: false, // 不删除源文件 minRatio: 0.8 // 压缩比 }) ] } } }

生成 .zp 文件

以上操作后即可大功告成，在网站被访问的时候，可以让nginx默认返回已经压缩好的 gzip 文件。