你必须知道的Gzip与图片压缩：让网页飞起来的秘密武器为什么你的网页加载慢？可能是忽略了代码和图片的“瘦身”技巧！本文讲

Gzip代码压缩：你不知道的“瘦身”秘密

你有没有想过，为什么我们总是强调要压缩代码？难道只是为了减少文件大小吗？还是说背后有更深层次的原因？今天我们就来聊聊 Gzip 这个看似普通但又极其重要的技术。它不仅仅是“压缩”，更是一种让网页加载速度飞起来的魔法。

什么是 Gzip 压缩？

首先，让我们从最基础的概念说起。Gzip 是一种压缩技术，专门用来减少文本文件（比如 HTML、CSS、JavaScript 等）在网络传输中的体积。服务器在发送这些文件之前，会先对它们进行压缩；而浏览器接收到这些压缩后的文件后，会自动解压并使用。听起来很简单，对吧？但问题来了：既然浏览器需要解压，那这个过程不会拖慢加载速度吗？别急，我们稍后再聊这个问题。

简单来说，Gzip 的核心目标就是 减少网络传输量，从而加快页面的加载速度。想象一下，如果你的 JavaScript 文件原本是 1MB，经过 Gzip 压缩后变成了 300KB，那么用户打开你的网站时，只需要下载 300KB 的数据，而不是 1MB。这不仅节省了带宽，还让用户更快地看到页面内容。

如何实现 Gzip 压缩？

现在我们知道 Gzip 很有用，但具体怎么用呢？其实并不复杂，尤其是当你使用像 Vite 这样的现代构建工具时。接下来，我会一步步带你实现 Gzip 压缩，并解释每一步的意义。

1. 安装 `rollup-plugin-gzip`

首先，我们需要安装一个插件——rollup-plugin-gzip。这个插件的作用是在构建过程中自动将文件压缩成 .gz 格式。它是开发依赖，意味着它只会在构建阶段工作，而不会影响生产环境的运行。

npm install --save-dev rollup-plugin-gzip

2. 在 `vite.config.js` 中配置 Gzip

安装完成后，我们需要告诉 Vite 使用这个插件。打开 vite.config.js 文件，添加以下代码：

import gzipPlugin from 'rollup-plugin-gzip';

export default {
  plugins: [
    react(),
    gzipPlugin()
  ]
}

这里的关键是 gzipPlugin()，它会自动处理打包后的文件，生成对应的 .gz 文件。你可以把它看作是一个“幕后工作者”，默默地帮你优化文件。

3. 打包并验证效果

接下来，运行打包命令：

npm run build

打包完成后，你会发现输出目录中多了一些 .gz 文件。这些文件就是压缩后的版本。肉眼可见，它们的体积比原始文件小了很多！这就是 Gzip 的魔力。

4. Nginx 配置

最后一步，为了让浏览器能够正确识别和使用这些 .gz 文件，你需要在 Nginx 中启用 Gzip 支持。在 nginx.conf 文件中添加以下配置：

http {    
  gzip_static on;    
  gzip_proxied any;
}

这里的 gzip_static on 告诉 Nginx 直接提供 .gz 文件，而不需要动态压缩。这样可以进一步提升性能。

浏览器解压真的不耗时吗？

到这里，可能有人会问：“虽然文件变小了，但浏览器解压也需要时间啊，这不是额外的开销吗？”

好问题！确实，解压是需要时间的，但现代浏览器对 Gzip 解压进行了高度优化，解压的速度非常快。更重要的是，解压的时间远远小于通过网络传输未压缩文件所需的时间。换句话说，即使浏览器需要解压，整体的加载时间仍然会显著减少。

举个例子：假设你有一个 1MB 的 JavaScript 文件，未经压缩的情况下，用户需要花费 1 秒钟下载；而经过 Gzip 压缩后，文件变成 300KB，下载时间缩短到 0.3 秒，再加上 0.05 秒的解压时间，总时间只有 0.35 秒。相比之下，显然是压缩后的方案更快。

所以，别担心解压的问题，浏览器已经为你做好了优化。

图片压缩：不只是代码的事儿

刚才我们聊了代码压缩，但你有没有注意到一个问题？当我们压缩完代码后，图片资源的大小似乎没有变化。这是因为在 Gzip 的世界里，图片并不是它的“菜”。那么，图片该怎么优化呢？答案是：图片压缩。

为什么要压缩图片？

图片通常是网页中最占空间的部分之一。一张未经优化的图片可能会占用几 MB 的空间，甚至更多。如果每次加载页面都需要下载这么大的图片，用户的体验可想而知。因此，压缩图片同样是非常重要的一步。

如何实现图片压缩？

幸运的是，Vite 社区为我们提供了一个强大的插件——vite-plugin-imagemin，它可以轻松地对图片进行压缩。接下来，我们来看看如何使用它。

1. 安装 `vite-plugin-imagemin`

首先，安装插件作为开发依赖：

npm install --save-dev vite-plugin-imagemin

2. 在 `vite.config.js` 中配置图片压缩

然后，在 vite.config.js 中添加图片压缩的配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import gzipPlugin from 'rollup-plugin-gzip';
import viteImagemin from '@vheemstra/vite-plugin-imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';

export default defineConfig({
  plugins: [
    react(),
    gzipPlugin(),
    viteImagemin({
      plugins: {
        jpg: imageminMozjpeg(), // 使用 MozJPEG 压缩 JPG 图片
      },
      onlyAssets: true, // 只压缩静态资源
    }),
  ],
  server: {
    port: 2024,
  },
});

这里我们使用了 imagemin-mozjpeg 来专门处理 JPG 格式的图片。当然，你也可以根据需求添加其他格式的支持。

3. 打包并查看效果

最后，运行打包命令：

npm run build

打包完成后，你会发现图片的体积也明显减小了。这样一来，无论是代码还是图片，都得到了优化，页面的整体加载速度自然会大幅提升。

总结

今天我们聊了两个非常重要的优化技术：Gzip 代码压缩 和 图片压缩。它们虽然看似简单，但却是提升网页性能的关键步骤。记住，优化不仅仅是“让文件变小”，更是为了给用户提供更好的体验。

下次当你看到一个快速加载的网页时，不妨想一想，背后可能隐藏着这些默默工作的“英雄”。

你必须知道的Gzip与图片压缩：让网页飞起来的秘密武器