前端优化gzip

gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress（webpack），deflate等

主要用于组件的压缩

压缩的话主要分为两种，

服务器在线压缩（nginx）：

Nginx 是一款轻量级的 Web 服务器，也可以用于反向代理、负载平衡和 HTTP 缓存等。Nginx 使用异步事件驱动的方法来处理请求，是一款面向性能设计的 HTTP 服务器。

传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的。正是这个主要的区别带给了 Nginx 在性能上的优势。

Nginx 架构的最顶层是一个 master process，这个 master process 用于产生其他的 worker process，这一点和Apache 非常像，但是 Nginx 的 worker process 可以同时处理大量的HTTP请求，而每个 Apache process 只能处理一个。

在线压缩需要考虑到不同服务器的不同配置（node，nginx，tomcat）

nginx的属性如下

压缩率的提高，所消耗的CPU也会越来越多。建议设置gzip_comp_level 4

前端预生产gz文件：

可提前使用webpack工具和vite工具进行打包生成gz文件，减轻服务器的压力

//在webpack中可以使用compression-webpack-plugin来实现

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

module.exports = {
  // ...其他配置
  plugins: [
    new CompressionPlugin({
      // 匹配需要进行Gzip压缩的文件类型
      test: /\.(js|css|html|svg)$/,
      // 只有文件大小大于等于该值时才会生成Gzip文件
      threshold: 10240,
    }),
  ],
};

//在vite中使用vite-plugin-compression来实现

import compressPlugin from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    compressPlugin({
      ext: '.gz',
      algorithm: 'gzip',
      deleteOriginFile: false,
    }),
  ],
});

对于nginx的配置：

Nginx 是一种常用的 Web 服务器和反向代理服务器，它也支持 Gzip 压缩。 Nginx 中配置 Gzip 压缩的过程：

1. 打开 Nginx 的配置文件（通常是 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf）。
2. 在 http 块中添加以下配置：

bashhttp {
gzip on; # 开启 Gzip 压缩
gzip_min_length 1k; # 设置最小压缩文件大小，小于该值的文件不会被压缩
gzip_comp_level 6; # 设置压缩级别，1-9 之间，数值越大压缩率越高，但也会消耗更多的 CPU 资源
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 设置需要压缩的文件类型
gzip_vary on; # 根据客户端的请求头来决定是否使用 Gzip 压缩
}

1. 保存配置文件并重新加载 Nginx，使配置生效。

Gzip 压缩虽然可以减小传输数据的大小，但也会增加服务器的 CPU 负担。因此，在配置 Gzip 压缩时，需要根据实际情况进行权衡，选择适当的压缩级别和需要压缩的文件类型。同时，也需要注意不要过度压缩，以免影响用户体验。