HTTP传输中gzip压缩

前端打包压缩的有grunt，gulp，webpack，而gzip压缩是指服务端对资源进行压缩。
gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。

使用 gzip 方式进行压缩

客户端可以事先声明一系列的可以支持压缩模式，与请求一齐发送。 Accept-Encoding这个首部就是用来进行这种内容编码形式协商的：

Accept-Encoding: gzip, deflate

服务器在 Content-Encoding 响应首部提供了实际采用的压缩模式：

Content-Encoding: gzip

nginx配置压缩

• 开启gzip

gzip on;

• 启用gzip压缩的最小文件，小于设置值的文件将不会压缩

gzip_min_length 1k;

• gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间

gzip_comp_level 2;

• 进行压缩的文件类型。其中的值可以在 mime.types找到

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

webpack构建gizp压缩

可以使用compression-webpack-plugin插件，打包后会生成gz后缀的文件。然后nginx配置gzip_static on;
gzip_static是会自动执行gz文件的，这样的就避免了通过gzip自动压缩；

示例

• 使用vue-cli构建项目
• 添加vue.config.js

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

• nginx配置

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;