Brotli 和Gzip 均可用於前端優(yōu)化，但Brotli 壓縮率更高，Gzip 兼容性更好，建議優(yōu)先啟用Brotli 並保留Gzip 作為降級方案；可通過Webpack 的compression-webpack-plugin 插件生成.br 和.gz 文件，並配置壓縮級別、文件類型和閾值；部署時需在服務(wù)器（如Nginx 或Apache）配置對應(yīng)模塊及MIME 類型，按順序優(yōu)先返回.br 文件，其次.gz，最後原始文件；注意事項包括檢查Accept-Encoding 請求頭、文件路徑、模塊加載、MIME 類型、避免雙重壓縮及合理選擇壓縮等級。

Brotli 和Gzip 是前端優(yōu)化中常用的壓縮方式，能有效減少傳輸體積，加快網(wǎng)頁加載速度。這篇文章講講怎麼在JavaScript 項目裡用上這兩種壓縮方式，特別是部署時的一些關(guān)鍵點。

Brotli 和Gzip 的區(qū)別

Brotli 和Gzip 都是用於壓縮文本資源（比如JS、CSS、HTML）的算法，但它們有幾個主要區(qū)別：

• 壓縮率：Brotli 的壓縮率通常比Gzip 更高，尤其對JavaScript 文件來說更明顯。
• 瀏覽器支持：現(xiàn)代主流瀏覽器都支持Brotli，但如果你還需要兼容老舊系統(tǒng)（比如IE），Gzip 可能更穩(wěn)妥。
• 使用場景：一般建議優(yōu)先啟用Brotli，同時保留Gzip 作為降級方案。

所以部署的時候，最好兩者都配好，兼顧性能和兼容性。

如何生成壓縮文件

要在項目中輸出.br （Brotli）和.gz （Gzip）格式的壓縮包，通常需要構(gòu)建工具配合插件來處理。

以常見的Webpack 為例，你可以使用compression-webpack-plugin來實現(xiàn)：

 npm install compression-webpack-plugin --save-dev

然後在webpack.config.js中添加配置：

 const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: "[path][base].gz",
      algorithm: "gzip",
      test: /\.js$|\.css$/,
      threshold: 1024,
      minRatio: 0.8,
    }),
    new CompressionPlugin({
      filename: "[path][base].br",
      algorithm: "brotliCompress",
      test: /\.js$|\.css$/,
      compressionOptions: { level: 11 },
      threshold: 1024,
      minRatio: 0.8,
    }),
  ],
};

這樣打包後，就會自動生成對應(yīng)的.gz和.br文件了。

其他構(gòu)建工具如Vite 或Rollup 也有類似插件，基本邏輯是一樣的：指定要壓縮的文件類型，設(shè)置壓縮級別和閾值。

部署時服務(wù)器如何啟用壓縮

光有壓縮文件還不夠，服務(wù)器也得正確配置才能根據(jù)客戶端請求返回壓縮版本。

Nginx 示例

如果你用的是Nginx，可以在配置中加上：

 location ~ \.js$ {
  types {}
  default_type application/javascript;
  add_header Content-Encoding br;
  gzip_static on;
  brotli_static on;
}

或者更通用一點：

 location ~ ^/. \.(js|css|html|svg)$ {
  try_files $uri.br $uri.gz $uri =404;
  add_header Vary Accept-Encoding;
}

注意這裡順序很重要，先查.br ，再查.gz ，最後才是原始文件。

Apache 示例

Apache 可以通過.htaccess啟用壓縮：

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP:Accept-Encoding} br
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}.br -f
  RewriteRule ^(.*)$ $1.br [L]

  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}.gz -f
  RewriteRule ^(.*)$ $1.gz [L]
</IfModule>

<IfModule mod_mime.c>
  AddEncoding br .br
  AddEncoding gzip .gz
</IfModule>

這些配置的核心思想就是：根據(jù)請求頭判斷是否支持壓縮，並嘗試返回對應(yīng)版本。

常見問題和注意事項

有時候你可能遇到壓縮沒生效的問題，可以檢查以下幾點：

• 瀏覽器請求頭里有沒有Accept-Encoding: br, gzip
• 構(gòu)建出來的.br和.gz文件有沒有正確放到靜態(tài)目錄
• 服務(wù)器有沒有開啟對應(yīng)模塊（比如Nginx 要裝ngx_http_gzip_static_module和ngx_brotli ）
• MIME 類型有沒有寫錯，尤其是某些CDN 會校驗得很嚴(yán)格
• 不要重複壓縮，有些服務(wù)端框架會自動壓縮內(nèi)容，會導(dǎo)致“雙重壓縮”問題

另外，壓縮級別也不是越高越好。 Brotli 的壓縮等級是0~11，默認推薦用6 左右，11 級壓縮效果更好但構(gòu)建時間會增加不少。

基本上就這些。壓縮這事兒看起來不復(fù)雜，但真做起來容易踩幾個小坑。只要構(gòu)建和部署環(huán)節(jié)都配對上了，就能穩(wěn)穩(wěn)提升頁面加載速度。

以上是實施JavaScript Brotli和GZIP壓縮的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！