【建站】应用gzip

相关文章

• 安装nginx
• 安装mongodb
• 安装nodejs
• 应用gzip
• 部署egg项目
• 应用浏览器缓存
• 解决nodejs18+下lib库问题

应用gzip

---

系统环境

• 技术栈：Vue 3.x
• nginx：v1.22.1

一、什么是gzip

• Gzip（GNU zip）是一种文件压缩格式和压缩工具，用于减小文件大小以节省存储空间或者加快文件传输速度。
• Gzip 压缩算法是一种基于 DEFLATE 算法的压缩方法，它采用了 Lempel-Ziv 算法和哈夫曼编码来实现数据压缩。通过删除文件中的重复数据和使用更短的编码来表示常用的数据模式，Gzip 可以将文件的大小减小到原始大小的一半甚至更少。
• Gzip 格式的文件通常具有 .gz 扩展名，并且可以通过许多压缩工具和程序来创建和解压缩。它广泛应用于网络传输中，例如，网站可以使用 Gzip 对静态资源文件（如 HTML、CSS、JavaScript 文件）进行压缩，从而减小文件大小，加快网页加载速度。此外，邮件服务器、文件传输工具和操作系统也经常使用 Gzip 来压缩文件以节省带宽和存储空间。
• 总之，Gzip 是一种常用的文件压缩格式和压缩工具，它通过删除重复数据和使用更高效的编码来减小文件大小，从而提高文件传输效率。

二、修改项目构建

1、安装npm包

# yarn add compression-webpack-plugin

compression-webpack-plugin 是一个用于 Webpack 的插件，用于在构建过程中对输出的文件进行压缩。它可以将构建生成的文件进行 gzip 或者 Brotli 压缩，从而减小文件大小，提高网页加载速度。你可以配置该插件来压缩你构建生成的静态资源文件，并根据需要选择合适的压缩算法和参数。

2、构建配置文件中引入并进行配置

以我本地通过vue-cli创建的项目为例，配置如下

const { defineConfig } = require("@vue/cli-service")
const CompressionPlugin = require("compression-webpack-plugin")

module.exports = defineConfig({
    ...
    configureWebpack: {
        plugins: [
        // gzip压缩
        new CompressionPlugin({
            algorithm: "gzip", // 使用gzip压缩
            test: /\.(js|css|json|ttf)$/,
            filename: "[path][base].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
            minRatio: 1, // 压缩率小于1才会压缩
            threshold: 10240, // 对超过10k的数据压缩
        }),
        ],
    },
})

3、执行构建命令，如npm run buid

# yarn build

构建出的dist目录可以看到符合条件的资源已经额外产生了一个后缀名为gz的文件

三、修改Nginx配置

1、在http模块中添加如下

# 开启Gzip压缩
gzip on;
# 低于10k的资源不压缩，这个大小可通过自己项目架构来限制
gzip_min_length 10k;
# 压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。 
gzip_comp_level 8; 
# 需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
# 配置反向代理缓存路径
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

2、重启nginx

# /usr/local/nginx/sbin/nginx -s reload

3、验证是否生效

• 请求标头中的Accept-Encoding 用于指示客户端（通常是浏览器）能够理解和接受的内容编码（Content-Encoding）类型。
• 响应标头中的Content-Encoding 用于指示服务器对响应实体主体使用的内容编码（Content-Encoding）类型。

很明显，gzip启动成功了

四、常见问题

1、gzip到底能压缩哪些类型的请求

• Gzip 可以压缩几乎所有类型的 HTTP 请求和响应的内容，包括但不限于：

  • 文本文件： 如 HTML、CSS、JavaScript、XML、JSON、Markdown 等文本文件。
  • 网页内容： 包括 HTML 页面、网页脚本、样式表等。
  • 图片： 尽管图片通常已经被压缩过了，但某些情况下可以进一步压缩，特别是 PNG 图片。
  • 字体文件： 如 TrueType 字体、OpenType 字体等。
  • SVG： 可缩放矢量图形。
  • 压缩算法可识别的二进制文件： 如 PDF 文件、SWF 文件等。
  • 需要注意的是，对于已经是压缩格式的文件（如 JPEG、PNG、GIF、MP3、MP4 等），再次使用 Gzip 进行压缩通常不会得到很大的压缩率。因此，通常情况下不会对这些文件类型进行 Gzip 压缩。

• 在实践中，通常会对 HTML、CSS、JavaScript 等文本文件进行 Gzip 压缩，以减小文件大小，提高网页加载速度。而对于图片、字体等二进制文件，由于已经经过专门的压缩算法，因此不太常见对其进行 Gzip 压缩。