前端优化：开启Gzip压缩

什么是Gzip

Gzip是一种文件压缩算法，减少文件大小，节省带宽从而提减少网络传输时间，网站会更快地加载。

Gzip工作原理

1. 浏览器请求url，在请求头中设置属性accept-encoding：gzip。表明浏览器支持gzip，这个参数是浏览器自动会携带的请求头信息。
2. 服务器收到浏览器发送的请求之后，服务器会返回压缩后的文件，并在响应头中包含content-encoding: gzip；如果没有压缩文件，返回未压缩的请求文件。
3. 浏览器接收到到服务器的响应，根据content-encoding: gzip 响应头使用gzip策略去解压压缩后的资源，通过content-type内容类型决定怎么编码读取该文件内容。

三种使用Gzip压缩的姿势

1. Nginx配置（浏览器访问xxx.js时，服务器对文件Gzip压缩后传输给浏览器，前端不做任何处理，实时压缩，耗费服务器性能）
2. webpack配置（打包构建时使用webpack / vite预先生成对应的.gz文件，浏览器请求xxx.js文件时，返回对应的xxx.js.gz【自动解压js或者css等资源文件】，不耗费服务器性能，打包后构建的产物体积会变大）
3. Nodejs配置

 

服务器在线Gzip压缩

前端无需进行配置，服务器进行处理即可，以Nginx为例，需要在nginx.conf中增加以下配置：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    # 开启gzip
    gzip  on;
     
    # 设置缓冲区大小
    gzip_buffers 4 16k;
     
    #压缩级别官网建议是6
    gzip_comp_level 6;
  
    #压缩的类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

前端预生成gz文件

前端打包借助compression插件

npm install compression-webpack-plugin --save-dev
npm install --save-dev vite-plugin-compression

在config.js中配置如下：

//在 vue.config.js 中添加Webpack配置不同写法
{
 ...
 chainWebpack(config, {webpack}){
    config.plugin('compression-webpack-plugin').use(CompressionPlugin, [{
      algorithm: 'gzip',
      test: /\.(js|css|html|svg|gif|png|jpeg|txt)$/,
      filename: '[base].gz',
      threshold: 2048,
      deleteOriginalAssets: false,
    }])
  },
...
}

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            }),
        ],
    },
};

//在 vite.config.js 中添加以下代码
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [viteCompression()]
})

运行vite build/ npm run build命令，构建产物会出现对应的.gz文件打包后文件目录：

可以通过配置deleteOriginalAssets：true，删除未打包资源，推荐保留未打包资源。

除了前端需要预先生成.gz的压缩文件，还需要服务端进行一些配置，以Nginx为例，需要在nginx.conf中增加以下配置：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on; //开启这个属性就是静态加载本地的gz文件
    gzip_static on;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

nodejs启用gzip

nodejs启用gzip相对来说比较简单，以express框架为例如何启用gzip；

npm install compression 
npm install @types/compression --save-dev

import compression from 'compression';
...
const app = express();
// 尽量在其他中间件前面
app.use(compression({level: 5}));
...

如何使用、区分两种方式

那么问题来了，如果想在有gz文件的时候进行静态压缩，不存在gz文件的时候进行在线压缩而不是加载源文件，要如何做呢？
答案就是两种配置都打开：

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。所以我们两个配置都开启即可

那么都开启的情况下，我们怎么区分使用了静态加载还是在线压缩呢？

响应头的Content-Edcoding:gzip表示Gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。

静态加载

在线压缩

参考链接：https://www.jianshu.com/p/7244ec58e90d 前端性能之gzip压缩 - 知乎