nginx和webpack开启gzip压缩--前端开发

如果 Nginx 服务器开启gzip，会将静态资源在服务端进行压缩，压缩包传输给浏览器后，浏览器再进行解压使用，这大大提高了网络传输的效率，尤其对 js，css 这类文本的压缩，效果很明显。

以下是 Nginx 开启 gzip 的配置：

开启|关闭 gzip。

gzip on|off;

文件大于指定 size 才压缩，以 kb 为单位。

gzip_min_length 10;

压缩级别，1-9，值越大压缩比越大，但更加占用 CPU，且压缩效率越来越低。

gzip_comp_level 2;

压缩的文件类型。

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;

开启后如果能找到 .gz 文件，直接返回该文件，不会启用服务端压缩。

gzip_static on|off

是否添加响应头 Vary: Accept-Encoding 建议开启。

gzip_vary on;

请求压缩的缓冲区数量和大小，以 4k 为单位，32 为倍数。

gzip_buffers 32 4K;

如果 Nginx 没有开启gzip，前端在打包的时候可以打包出一份资源的压缩版本，Nginx 也会把压缩文件传输给浏览器。

首先安装一个插件：

npm i -D compression-webpack-plugin

在 vue.config.js 中配置下这个插件:

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/,
            threshold: 10240,
            deleteOriginalAssets: false
          })
        ]
      }
    }
  }
}

nginx 服务器还要做一下简单配置:

gzip_static on;

使用 gzip 压缩打包配置成功后，重新将代码部署到 nginx，重新载入 nginx 配置。

我们先看一下没有开启 gzip_static off; gzip 的访问情况：

nginx 未开启 gzip 压缩 我们直接看最大的两个文件 chunk-vendors.js 和 chunk-vendors.css，他们的大小分别是 748kb 和 194kb，加载用时分别是 622ms 和 247ms。

然后我们开启 gzip gzip_static on; 再看下资源的加载情况：

nginx 开启 gzip 压缩 同样是 chunk-vendors.js 和 chunk-vendors.css，他们的大小变成 190kb 和 29.3kb，加载时间变成 245ms 和 46ms。

以上就是使用 gzip 的效果。