便利贴--19{webpack打包，减小chunk-vendors.js大小，使用gzip压缩方法}

轻动琴弦

已于 2022-03-30 11:08:06 修改

阅读量710

点赞数 1

CC 4.0 BY-SA版权

分类专栏：编程基础 javascript 文章标签： javascript webpack vue.js

于 2022-02-08 17:02:31 首次发布

本文链接：https://blog.youkuaiyun.com/hacker12356/article/details/122827406

编程基础同时被 2 个专栏收录

44 篇文章

订阅专栏

javascript

16 篇文章

订阅专栏

本文介绍了如何通过Vue.config.js配置Webpack的compression-plugin来减小chunk-vendors.js文件大小，并启用gzip压缩。同时，针对Nginx服务器配置gzip遇到的问题进行了分析，指出当gzip_http_version默认为1.1时，在多层代理情况下可能导致gzip功能失效。解决方案是将gzip_http_version设置为1.0，从而确保gzip正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

便利贴--19{webpack打包，减小chunk-vendors.js大小，使用gzip压缩方法}

vue.config.js
Nginx gzip
最后，服务器使用失败，

vue.config.js


//减少chunk-vendors.js文件大小
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
productionSourceMap: false, //代码压缩加密
  configureWebpack: {
    // webpack plugins
    plugins: [
      new CompressionPlugin({
        algorithm: "gzip",
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        // test: /\.(js|css)$/,
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8, // 压缩比
      }),
    ],
  },
  }

Nginx gzip

在 server 下

 gzip on;
 gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript  image/jpeg image/gif image/png;

原本
在这里插入图片描述
后来

打包后的文件

最后，服务器使用失败，

原因是gzip_http_version默认是1.1，因此如果配置多层代理时，如果没有配置gzip_http_version时，该值默认为1.1，而agent nginx会把请求转化为1.0版本的，此时gzip功能就会不起作用；将gzipz_http_version配置为1.0后，gzip功能正常。

附上所查询资料的连接：：
第一找到的是这个博主的: 简书.
在上面的文章中引用的文章: 掘金.

最终解决了昨天一下午没解决的问题······