当我们在开发网页应用程序时，我们经常需要通过将静态资源（如HTML、CSS、JavaScript文件等）压缩来提高网页的加载速度和性能。其中，GZIP压缩是一种常用的压缩技术，它可以将静态资源压缩为更小的文件大小，从而加快它们的传输速度，并减少网络带宽的占用。而Webpack作为现代JavaScript应用程序的模块打包工具，也提供了一种方便的方式来对静态资源进行GZIP压缩。

Webpack4配置

js
const CompressionPlugin = require('compression-webpack-plugin')
module.exports={
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionPlugin({
          // gzip压缩配置
          test: /\.js$|\.html$|\.css/, // 匹配文件名
          threshold: 10240, // 对超过10kb的数据进行压缩
          deleteOriginalAssets: false, // 是否删除原文件
        })
      )
    }
  }
}

Nginx配置

nginx
server {
 listen 202;
 server_name default_server;
 root /data/jenkins-demo;
 autoindex on;
 gzip on;
 gzip_static on;
 gzip_http_version 1.1;       #http协议版本
 gzip_min_length 1024;
 gzip_buffers 4 16k;
 gzip_comp_level 2;           #压缩等级，等级越高，压缩比例越高
 gzip_types text/plain application/javascript application/x-javascript text/css
            application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png;     #支持的压缩格式
 gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
 gzip_disable "MSIE [1-6]\."; #IE6对Gzip不怎么友好，不给它Gzip了

location / {
  index index.html;
 }
}