性能优化，gzip压缩加速访问
2024-10-28 11:28:47 #vue3 #nginx #性能优化

gzip文件压缩是一个常用的性能提升手段，几乎是现代前端做性能优化的必须手段。

以前一直想整理一下，但是没有合适的例子，最近正好在整理自己的开源项目，且服务器带宽很烂。

于是，这次经历就是一个极佳的性能优化案例了，一定要整理下。

正文

先说结论，gzip压缩效果出乎意料的好，大幅提升了访问速度，将一个访问极慢的页面改为至少勉强能用了。

废话不说多，我们直接看结果。

对比结果

对比指标 优化前 优化后
文件大小 2M左右 500k左右
访问时间 90s左右 15s左右

可以看到，性能提升了不止一点点，尽管很慢，但是速度确实肉眼可见的大幅提升。

不过因为服务器带宽太低，这里访问速度效果还是很差。

Vue3配置

在 Vite 项目中配置 Gzip 压缩，可以通过 vite.config.js 文件来实现。

安装依赖， 如果你还没有安装 vite-plugin-compression 插件，可以使用以下命令进行安装：

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

配置 vite.config.js， 在 vite.config.js 文件中引入并配置 vite-plugin-compression 插件。

这里单独配置了一个插件，如下，当我们在生产环境时候再使用gzip比较好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import compression from 'vite-plugin-compression'

export default function createCompression(env) {
    const { VITE_BUILD_COMPRESS } = env
    const plugin = []
    if (VITE_BUILD_COMPRESS) {
        const compressList = VITE_BUILD_COMPRESS.split(',')
        if (compressList.includes('gzip')) {
            plugin.push(
                compression({
                    ext: '.gz',
                    deleteOriginFile: false
                })
            )
        }
        if (compressList.includes('brotli')) {
            plugin.push(
                compression({
                    ext: '.br',
                    algorithm: 'brotliCompress',
                    deleteOriginFile: false
                })
            )
        }
    }
    return plugin
}

我这里将所有的文件都封装为一个config文件，搞定

1
2
3
4
5
6
7
8
9
import vue from '@vitejs/plugin-vue'

import createCompression from './compression'

export default function createVitePlugins(viteEnv, isBuild = false) {
    const vitePlugins = [vue()]
	isBuild && vitePlugins.push(...createCompression(viteEnv))
    return vitePlugins
}

在vue.config.js的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import createVitePlugins from './vite/plugins'
import { defineConfig, loadEnv } from 'vite'

import createVitePlugins from './vite/plugins'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
  }
})

Nginx配置

光完成vue3的配置打包，并不能在线上访问，这时候需要自行去处理nginx的配置，保证用户可以获取对应的配置。

为什么要开启 gzip 压缩？

在深入了解如何开启之前，让我们先弄清楚为什么要使用 gzip 压缩。

简单来说，gzip 压缩可以将网页文件大小压缩至原大小的 30% 甚至更低，这直接导致了数据传输时间的缩短，进而提升了网站加载速度，提高用户体验。

尤其是对于文本类文件（如 HTML、CSS、JavaScript），gzip 可以极大地优化其传输效率。

开启 Nginx 的 gzip 压缩

接下来，我们一步步来操作如何在 Nginx 中开启 gzip 压缩。

首先，你需要找到 Nginx 的配置文件 nginx.conf，通常位于 /etc/nginx/nginx.conf。

编辑配置

使用你喜欢的文本编辑器打开 nginx.conf，然后在 http 模块（不是 server 或 location）中添加如下配置：

1
2
3
4
5
6
7
gzip on;  # 开启 gzip 压缩
gzip_min_length 1k;  # 设置允许压缩的页面最小字节数
gzip_buffers 16 64k;  # 设置系统获取多少缓冲区，以及每个缓冲区的大小
gzip_http_version 1.1;  # 启用 HTTP/1.1 时的 gzip 压缩
gzip_comp_level 9;  # 设置 gzip 压缩级别，1（最快）到 9（最小）9是最高压缩率但占用CPU较多
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;  # 指定压缩的 MIME 类型
gzip_vary on;  # 根据请求的Accept-Encoding头信息来判断是否启用gzip

这里简单解释一下关键参数：

  • gzip on;：启用 gzip 模块。
  • gzip_min_length 1k;：仅压缩大于 1KB 的响应体内容，避免对小文件进行压缩反而增大体积。
  • gzip_comp_level 9;：设置压缩等级，1-9，数值越大，压缩率越高，但相对会占用更多的 CPU 资源。
  • gzip_types：定义哪些类型的文件需要被压缩，常见的有 HTML、CSS、JS 等文件类型。

重启 Nginx

编辑完毕后，通过以下命令重新加载 Nginx 配置

1
sudo nginx -s reload

验证 gzip 压缩是否开启

最简单的验证方式是通过浏览器的开发者工具。

在浏览器地址栏输入你的网站地址，打开网站，然后按 F12 打开开发者工具，选择“网络”(Network)标签页。

刷新网页，点击任意一个请求，在响应标头（Response Headers）中查找 Content-Encoding 字段。

如果看到 gzip，恭喜你，gzip 压缩已经成功开启！

总结

通过上述步骤，你可以轻松地在 Nginx 服务器上启用 gzip 压缩功能。

虽然这会稍微增加服务器的 CPU 负荷，但考虑到带宽成本和网站性能的提升，这通常是值得的。

另外，不要忘了定期检查你的网站性能，确保它能够为用户提供最佳的访问体验。

开启 gzip 压缩只是众多性能优化策略中的一个，持续优化，让我们的网站更快！

参考

Nginx 开启 gzip 压缩，让网站飞一会！ - 左诗右码 - SegmentFault 思否

Prev
2024-10-28 11:28:47 #vue3 #nginx #性能优化
Next