Skip to main content

Webpack 和 Nginx 开启 gzip 压缩

五月, 2023 · 预计阅读时间： 4 分钟

前端性能优化

使用 gzip 压缩，可以大幅减少传输的数据量和加载时间（尤其对 HTML、CSS、JavaScript 等静态资源），加快网页的访问速度。同时也可以有效降低带宽消耗，节约网络费用。

Nginx 压缩​

Nginx 支持在服务器端对静态文件进行 gzip 压缩：

开启 gzip​

在 Nginx 的配置文件中添加 gzip on; 即可开启 Gzip。

http {
    # ...
    gzip on;
    # ...
}

配置 Gzip 压缩类型​

接下来需要指定要 Gzip 压缩的 MIME 类型。可以通过 gzip_types 指令告诉 Nginx 对哪些类型的响应开启 Gzip 压缩。常见的类型包括 text/html、text/plain、text/css、application/json、application/javascript 等等。

http {
    # ...
    gzip on;

    # 配置 Gzip 压缩类型
    gzip_types  text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss;
    # ...
}

配置 Gzip 压缩级别​

Nginx 支持不同的压缩级别，其中 gzip_comp_level 参数用于设置 Gzip 压缩级别，值越大则表示压缩比越大，但压缩效率越来越低，也会导致 CPU 占用更多。

http {
    # ...
    gzip on;

    # 配置 Gzip 压缩类型
    gzip_types  text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss;

    # 配置 Gzip 压缩级别
    gzip_comp_level 4;
    # ...
}

配置 Gzip 压缩缓存​

可以使用 gzip_vary 参数来控制客户端是否应该根据请求头中的 Accept-Encoding 字段决定是否使用 Gzip，同时设置压缩的缓冲区数量和大小减少服务器的 CPU 占用率。

http {
    # ...
    gzip on;

    # 配置 Gzip 压缩类型
    gzip_types  text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss;

    # 配置 Gzip 压缩级别
    gzip_comp_level 4;

    # 配置 Gzip 缓存
    gzip_vary on;
    gzip_proxied any;
    # 以 8k 为单位，16 为倍数
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types application/atom+xml
    # ...
}

Webpack 压缩​

如果不想服务端压缩，前端使用 Webpack 在打包的时候可以打包出一份资源的压缩版本，Nginx 也会把压缩文件传输给浏览器。

安装 compression-webpack-plugin​

npm i compression-webpack-plugin -D

使用插件​

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

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

Nginx 配置​

http {
    # ...
    gzip_static on;
    # ...
}

将代码部署到 Nginx，重新载入 Nginx 配置生效。