资源压缩

快速开始

前端配置

1. 安装插件

   npm i compression-webpack-plugin --save-dev

2. 修改 Webpack 配置

   const CompressionPlugin = require('compression-webpack-plugin')
   
   module.exports = {
     plugins: [
       // https://github.com/webpack-contrib/compression-webpack-plugin#options
       // gzip
       new CompressionPlugin({
         algorithm: 'gzip',
         test: /\.(js|css|html|svg)$/,
         threshold: 10240,
         minRatio: 0.8,
       }),
       // brotli
       new CompressionPlugin({
         algorithm: 'brotliCompress',
         test: /\.(js|css|html|svg)$/,
         threshold: 10240,
         minRatio: 0.8,
         compressionOptions: { level: 11 }, // Brotli 最大压缩率
       }),
     ],
   }

服务器配置

Nginx 配置

1. 安装 brotli 模块

sudo apt install brotli

2. 修改 nginx 配置

server {
  listen 80;
  server_name example.com;

  location / {
    root /var/www/dist;
    index index.html;

    # ---- 手动优先 Brotli 静态资源 ----
    try_files $uri$br $uri$gz $uri =404;

    # ---- Gzip 配置 ----
    gzip on;
    gzip_static on; # 启用 Gzip 静态资源
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
    gzip_vary on;
    gzip_min_length 10240;

    # ---- Brotli 配置 ----
    brotli on;
    brotli_static on; # 启用 Brotli 静态资源
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
  }
}

如何选择？

gzip

兼容性好

• 请求头 Accept-Encoding: gzip
• 响应头 Content-Encoding: gzip

brotli

现代浏览器支持

• 请求头 Accept-Encoding: br
• 响应头 Content-Encoding: br