web性能优化之Gzip


最近开发活动页,启用了Lottie用于动画的播放,动画播放流畅了,但是发现动画的json资源很大,大点的都超过10M了,首页启动平均时间超过了10S,性能优化切实必行,精简请求资源大小是第一步,GZzip正是为此服务的。

gzip 是什么 ?

Gzip 是一种用于文件压缩和解压缩的算法与工具,全称是 "GNU zip"。它最初由 Jean-loup Gailly 和 Mark Adler 于 1992 年开发,作为 Unix 系统中的文件压缩程序。
Gzip 是一种无损压缩算法,它通过减少数据的冗余性来压缩文件大小,同时保证解压缩后的文件与原始文件完全一致。它使用 DEFLATE 算法,这是一种结合了 LZ77 和霍夫曼编码的压缩算法。

Gzip 在 Web 中的应用

在 Web 开发中,Gzip 压缩广泛用于减小静态文件(如 HTML、CSS、JavaScript、JSON、XML)和动态内容的大小。当浏览器向服务器请求资源时,服务器可以将这些文件以 Gzip 格式压缩后传输给浏览器,从而减少传输的数据量并加快页面加载速度。首先我们要了解什么是HTTP压缩。

HTTP压缩概述

HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或CSS文件。压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度。当然,同时也会增加一点点服务器的负担。Gzip是比较常见的一种HTTP压缩算法。

HTTP压缩工作原理


Web服务器处理HTTP压缩的工作原理如下:

  • 1.Web服务器接收到浏览器的HTTP请求后,检查浏览器是否支持HTTP压缩;
    在用户浏览器发送请求的HTTP头中, 带有"Accept-Encoding: gzip, deflate"参数则表明支持gzip和deflate两种压缩算法.
  • 2.如果浏览器支持HTTP压缩,Web服务器检查请求文件的后缀名;
    静态文件和动态文件后缀启动要所都需要在MetaBase.xml中设置.
    静态文件需要设置: HcFileExtensions Metabase Property
    动态文件需要设置: HcScriptFileExtensions Metabase Property
  • 3.如果请求文件是HTML、CSS等静态文件并且文件后缀启用了压缩,则Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件;
  • 4.如果请求文件的压缩文件不存在,Web服务器向浏览器返回未压缩的请求文件,并在压缩缓冲目录中存放请求文件的压缩文件;
  • 5.如果请求文件的最新压缩文件已经存在,则直接返回请求文件的压缩文件;
  • 6.如果请求文件是ASPX等动态文件并且文件后缀启用了压缩,Web服务器动态压缩内容并返回浏览器,压缩内容不存放到压缩缓存目录中。

Gzip 有多优秀 ?

开启 gzip 压缩前:


开启 gzip 压缩后(Tomcat):

生成Gzip

webpack构建支持Gzip

在 Webpack 中,可以通过插件来支持生成 Gzip 压缩文件,最常用的是 compression-webpack-plugin。这个插件会在构建时为生成的文件创建对应的 .gz 文件。

以下是配置 Webpack 生成 Gzip 压缩文件的步骤:

1. 安装 compression-webpack-plugin

首先,你需要安装 compression-webpack-plugin

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

或者使用 Yarn:

yarn add compression-webpack-plugin --dev
2. 配置 Webpack

在 Webpack 配置文件(例如 webpack.config.js)中使用 compression-webpack-plugin 来生成 Gzip 压缩文件。

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // 其他配置
  plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz', // 生成的 gzip 文件名
      algorithm: 'gzip', // 使用 gzip 压缩
      test: /\.(js|css|html|svg)$/, // 匹配哪些文件进行压缩
      threshold: 10240, // 只有大小超过 10KB 的文件才会被压缩
      minRatio: 0.8, // 只有压缩比小于这个值的文件才会被生成 gzip
    })
  ],
  // 其他配置
};
3. 选项说明:
  • filename: 生成的 Gzip 文件名,默认是 [path][base].gz,即在原文件的路径和名称后加上 .gz 后缀。
  • algorithm: 使用的压缩算法,这里指定为 gzip。你也可以选择 brotliCompress 来生成 Brotli 文件。
  • test: 指定要压缩的文件类型,通常包括 .js.css.html.svg 等。
  • threshold: 只有文件大小超过这个值时,才会进行压缩,单位为字节。默认是 10KB。
  • minRatio: 只有压缩比低于此值时,才生成对应的 .gz 文件。比如 0.8 表示压缩后的文件大小至少是原始文件的 80%。

Vite构建支持Gzip

在 Vite 中构建时,支持 Gzip 压缩是通过配置插件来实现的。Vite 本身并不会自动生成 Gzip 文件,但可以使用插件如 vite-plugin-compression 来实现 Gzip 压缩支持。以下是具体步骤:

1. 安装 vite-plugin-compression

首先,在你的项目中安装 vite-plugin-compression,这是一个用于生成 Gzip 压缩文件的插件。

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

或者使用 Yarn:

yarn add vite-plugin-compression --dev
2. 配置 Vite

接下来,在 Vite 的配置文件 vite.config.js 中引入并使用这个插件。这个插件会在 Vite 构建的过程中生成 .gz 压缩文件。

import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用插件
      threshold: 10240, // 只有大于这个大小的文件才会压缩,单位是字节,默认值为 10240 (10kb)
      algorithm: 'gzip', // 使用 gzip 压缩
      ext: '.gz', // 生成的压缩包后缀
    })
  ]
});
配置项说明:
  • verbose: 是否在构建时在控制台输出哪些文件被压缩。
  • disable: 是否禁用该插件,默认值为 false
  • threshold: 只有文件大小大于指定值时,才会生成压缩文件,单位是字节(默认 10KB)。
  • algorithm: 压缩算法,默认为 gzip,你也可以使用 brotliCompress 来生成 Brotli 压缩文件。
  • ext: 压缩文件的后缀名,默认是 .gz

Linux手动生成Gzip文件

在 Linux 中,gzip 是一个常用的压缩命令,用于压缩文件。它会将原始文件压缩为 .gz 格式。以下是一些常见的 gzip 命令使用方法:

1. 压缩文件

将指定文件压缩为 .gz 格式:

gzip filename
  • 例如,将 test.txt 压缩为 test.txt.gz
    gzip test.txt
    
2. 解压文件

使用 gzip -dgunzip 来解压 .gz 文件:

gzip -d filename.gz
# 或者
gunzip filename.gz
  • 例如,解压 test.txt.gz
    gzip -d test.txt.gz
    # 或者
    gunzip test.txt.gz
    
3. 保留原文件的压缩

如果你希望压缩文件时保留原文件,可以使用 -k 选项:

gzip -k filename
  • 例如,将 test.txt 压缩为 test.txt.gz,并保留 test.txt 原文件:
    gzip -k test.txt
    

进阶用法

4. 压缩目录

gzip 不能直接压缩目录,但可以先使用 tar 打包目录,再使用 gzip 压缩:

tar -czvf archive.tar.gz directory_name
  • -c:创建压缩文件
  • -z:通过 gzip 进行压缩
  • -v:显示压缩过程中的详细信息
  • -f:指定输出文件名

例如,压缩 myfolder 目录:

tar -czvf myfolder.tar.gz myfolder
5. 查看压缩比

使用 -l 选项来查看 .gz 文件的压缩信息,包括原文件大小、压缩文件大小、压缩比等:

gzip -l filename.gz
  • 例如,查看 test.txt.gz 的压缩比:
    gzip -l test.txt.gz
    

6. 递归压缩目录中的所有文件

使用 find 命令与 gzip 结合,递归压缩目录下所有文件:

find directory_name -type f -exec gzip {} \;
  • 例如,压缩 myfolder 目录下的所有文件:
    find myfolder -type f -exec gzip {} \;
    
7. 指定压缩级别

gzip 提供了从 1 到 9 的压缩级别,数字越大压缩率越高,但速度越慢。默认压缩级别是 6。

  • 快速压缩(较低压缩比)
    gzip -1 filename
    
  • 最大压缩(较慢速度)
    gzip -9 filename
    
8. 压缩多个文件

如果你有多个文件想要压缩为单独的 .gz 文件,可以一次性传递多个文件名:

gzip file1 file2 file3
  • 例如,压缩 file1.txtfile2.txt
    gzip file1.txt file2.txt
    
9. 检查文件完整性

你可以使用 -t 选项来测试 .gz 文件的完整性:

gzip -t filename.gz
10. 重定向输出到标准输出

使用 -c 选项将压缩结果输出到标准输出(stdout),可以与其他命令配合使用:

gzip -c filename > output.gz

配置服务器处理 Gzip 文件

虽然 Vite 可以生成 Gzip 或 Brotli 文件,但为了让浏览器请求这些文件时生效,你需要配置 Web 服务器来处理它们。例如,如果你使用 Nginx,可以按以下方式配置:

Nginx 配置:
server {
    gzip on;
    gzip_types text/plain application/json application/javascript text/css image/svg+xml;
    gzip_static on;  # 自动提供 .gz 文件
    location / {
        try_files $uri $uri.gz $uri.html =404;
    }
}

这会告诉 Nginx 优先提供 .gz 文件,并自动检测是否存在这些压缩文件。

Apache 配置示例:

如果使用 Apache,可以通过启用 mod_rewritemod_headers 模块来处理 Gzip 文件。

# 启用 Gzip 静态文件
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA]

# 设置正确的 Content-Encoding 头
<FilesMatch "\.gz$">
    Header set Content-Encoding gzip
    Header set Cache-Control "max-age=31536000"
</FilesMatch>

在浏览器中检测 Gzip 压缩

构建完成并配置好服务器后,你可以通过浏览器的开发者工具或者线上工具(如 Gzip Test)来检查 JSON 文件是否成功启用了 Gzip 压缩。。在响应头中,Content-Encoding: gzip 表示服务器成功返回了 Gzip 压缩的内容。

也可以使用 curl 命令来测试:

curl -I -H "Accept-Encoding: gzip" https://your-domain.com/bundle.js

如果 Gzip 压缩有效,你应该会看到类似如下的响应头:

Content-Encoding: gzip

我们通过Http头中的: 属性判断返回后的数据已经启用了gzip压缩:


注意:如果未收到gzip的返回,需要看下服务器端的gzip_types是否支持你访问的文件类型

Gzip兼容性

所有主流浏览器都支持 Gzip 压缩。这意味着如果服务器返回 Gzip 压缩的资源,浏览器可以自动解压缩并呈现页面。



Gzip 支持非常广泛,从早期版本的浏览器(如 Internet Explorer 6)到现代浏览器都默认支持它,因此从浏览器兼容性的角度来看,使用 Gzip 是非常安全的。

Gzip 支持的文件类型

虽然 Gzip 对大多数文本内容(如 HTML、CSS、JavaScript、JSON 等)压缩效果显著,但某些文件类型并不适合使用 Gzip。一般来说,Gzip 适合以下类型的文件:

  • HTML、CSS、JavaScript:这些是最常压缩的文件类型,压缩率通常在 60%-80% 左右。
  • JSON 和 XML:用于 API 的数据格式,压缩率较高。
  • SVG:虽然是图像文件,但由于它是 XML 格式,压缩率也较好。

不适合 Gzip 压缩的文件类型包括:

  • 图片(如 JPEG、PNG、GIF 等):这些文件通常已经压缩,再次使用 Gzip 压缩效果不佳,甚至可能导致文件体积增大。
  • 视频和音频文件(如 MP4、MP3 等):这些多媒体文件已经过压缩,使用 Gzip 无效。
  • PDF 文件:PDF 文件通常也已压缩,再使用 Gzip 可能没有显著效果。

总结

Gzip 是一种高效、广泛兼容的压缩算法,在提升网站性能方面表现突出。
适用于大多数文本文件,特别是在 Web 环境中压缩 HTML、CSS、JavaScript、JSON 等资源文件,能够显著缩短页面加载时间并节省带宽。
现代浏览器和服务器均支持 Gzip,因此在大多数 Web 应用中使用 Gzip 压缩是安全且高效的性能优化方案。

因此,在大多数网站和 Web 应用中,启用 Gzip 压缩是提升性能的最佳实践之一。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,271评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,725评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,252评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,634评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,549评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,985评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,471评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,128评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,257评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,940评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,528评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2 339

推荐阅读更多精彩内容