1.使用Gzip的好处

• 减少数据传输量：压缩可以显著减少要发送到客户端的数据的大小，从而节省了带宽。对于大型资源或整个网站，这种节省可能非常显著
• 更快的页面加载时间：由于传输的数据量减少，页面和资源的加载时间也会减少，从而提供更快的页面响应时间。
• 快速加载的页面和应用程序可以提供更好的用户体验，尤其是对于那些使用较慢的网络连接的用户。

2.vue3应用使用gzip

• 需要添加第三方插件依赖

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

• 在vue.config.js中添加 Gzip 配置：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css$/, 
        threshold: 10240, 
        deleteOriginalAssets: false 
      })
    ]
  }
}

3.配置Nginx 开启gzip

• 首先检查 nginx是否已经配置过 --with-http_gzip_static_module 参数

nginx -V

• 运行结果

configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module

• 里面包含了 --with-http_gzip_static_module 说明可以，如果没有哪就要重新弄一遍Nginx，这里不详细展开了。百度搜索nginx增加配置参数。

• 打开 nginx 配置文件 nginx.conf，在 htttp 代码块里面插入

gzip on;
gzip_disable "msie6"; 

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6; 
gzip_buffers 16 8k; 
gzip_http_version 1.1;
gzip_min_length 256; 

gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/json
    image/svg+xml
    font/opentype
    font/ttf
    font/otf
    application/vnd.ms-fontobject;

• 重新加载nginx配置文件，使其生效

sudo nginx -s reload

4.最后检查网站是否成功开启gzip

• https://tool.chinaz.com/gzips/?q=wangrunze.com