vue项目开启gzip方法

最新推荐文章于 2024-04-15 18:25:06 发布

原创最新推荐文章于 2024-04-15 18:25:06 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#gzip #nginx #vue

前端开发专栏收录该内容

15 篇文章

订阅专栏

本文介绍了两种开启gzip压缩的方法：一是通过Vue配置Webpack使用CompressionPlugin进行客户端压缩，二是利用Nginx服务器配置实现服务端压缩。详细配置包括匹配文件类型、压缩比率、阈值等关键参数。

开启gzip有两种方法

1.使用vue客户端

vue配置项

  configureWebpack: { 
    plugins: [
      new CompressionPlugin({
        algorithm: "gzip", // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: "[path].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
        minRatio: 0.8, // 压缩率小于1才会压缩
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
      }),
    ],
  },

nginx配置项

      gzip_static on;

2.使用nginx服务端

使用nginx开启，客户端不需要修改

    #gzip  on;
    gzip            on;
    gzip_min_length 1000;
    gzip_proxied    expired no-cache no-store private auth;
    gzip_types      text/plain application/x-javascript application/javascript text/css     application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;