資料壓縮是一種經過時間測試的效能最佳化技術，可減少符合資格的網頁資源的大小。常見的做法是在網路伺服器上使用 gzip 壓縮常見的文字網頁資源 (例如 HTML、CSS 和 JavaScript 檔案)，然後將檔案傳送給用戶端，以便進行解壓縮。因此可以加快資源的載入時間，而不影響網頁預期的行為。
雖然 gzip 本身就非常有效，但近年來網路壓縮功能已有進一步的改善。Chrome 於 2016 年開始採用 Brotli 演算法，為符合資格的資源提高整體壓縮率。在 2017 年底前，所有的新式瀏覽器皆支援 Brotli，伺服器對這項技術也開始受到支援。最近，Chrome 已推出 ZStandard 壓縮功能。
但工作還不止於此！Chrome 團隊一直在努力讓共用字典可在網路上使用，目前已推出 Brotli 和 ZStandard 的來源試用。共用字典可補充 Brotli 和 ZStandard 的壓縮，針對經常發布更新程式碼的網站提供大幅更高的壓縮率，在某些情況下還能提供90% 以上的壓縮率。本文將詳細說明共用字典的運作方式，以及如何在您的網站上註冊來源試用，以便用於 Brotli 和 ZStandard。
共用字典說明
壓縮是在輸入中找出多餘序列的過程，並運用該資訊建立較小的輸出，並且稍後可以撤銷。壓縮功能可大幅縮短資源載入時間，因此在網路上能順利運作。Brotli 和 ZStandard 可以使用「壓縮字典」進一步提高效率，壓縮字典就是這些演算法在壓縮過程中可使用的其他模式。事實上，Brotli 的高效率是使用內部字典而達到一定程度。
不過，「自訂」使用者收錄的字典可與 Brotli 和 ZStandard 搭配使用 (其中包含特定資源的特定模式)。實務上，自訂字典是可套用至任何輸入的外部檔案。字典可針對應用程式的生產程式碼，甚至完全隨意的內容。特定字典對其輸入是否適用，會對整體壓縮效率產生重大影響。與輸入內容內容高度相似的字典將產生的輸出，壓縮比含有一般或不相似內容的字典更高。
以自訂壓縮字典為例，看看網站採用 Angular 架構，目前版本是 1.7.9 版。這個版本的 Angular 架構大約為 172 KiB (未壓縮)，使用 Brotli 的預設設定壓縮時，大小約為 53 KiB。如此可產生將近 70% 的壓縮比例。不過，假設您之後決定升級到 Angular 1.8.3 版。由於這個版本的 Angular 大小與 1.7.9 版大致相同，因此壓縮率與前一版大致相同。
這時，透過稱為「差異壓縮」的程序，自訂字典就能派上用場，這種壓縮率可用來將較新版本的資源字典用於壓縮版本。以上述範例為例，如果您使用 1.7.9 版做為字典壓縮了 Angular 的 1.8.3 版，輸出結果就會是 4 KiB 以上。這代表壓縮比率將近 98%。顯然，壓縮字典會對載入效能造成很大的影響，而且已在實際應用程式中實現！
不過，要讓這個流程在網路上運作並不容易。捕捉到的意思是，如果您使用字典壓縮資源，就必須使用相同的字典才能「解壓縮」資源。過去曾嘗試在網路上嘗試這個流程 (亦即 SDCH)，但安全地實作時具有挑戰性。這次關於共用字典壓縮的最新提案解決了這些問題，同時為靜態和動態資源提供實質益處。
Chrome 如何宣傳支援共用字典
所有瀏覽器都會透過 Accept-Encoding 要求標頭通告支援的壓縮演算法。標頭內容是支援編碼的逗號分隔清單：
Accept-Encoding: gzip, br, zstd
這個特定的 Accept-Encoding 標頭會指出要求資源的瀏覽器支援 gzip、Brotli 和 ZStandard 壓縮演算法。這樣一來，回應要求的網路伺服器即可決定回應要求時要使用的演算法。
如果啟用共用字典支援，且資源有相關的字典，系統就會在 Accept-Encoding 標頭中新增額外權杖。這些權杖是 Brotli 的 br-d，zstd-d 則是 Zstandard。Chrome 也會提供可用字典的雜湊，說明如下。
Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:
如果網路伺服器設定辨識這個憑證，且該伺服器可辨識這個憑證，就能以適用編碼字典的資源，使用經過壓縮的資源來回應該要求。實際做法取決於要求是針對靜態資源或動態資源。
靜態資源的共用字典壓縮
靜態網頁資源一律會為要求的網址產生相同回應。常見的可壓縮靜態網頁資源範例包括 JavaScript 和 CSS 檔案。這些資源通常是為了配合快取而建立版本，有時在檔案名稱中使用雜湊檔案內容 (例如 styles.abcd1234.css)，或以其他方式建立資源指紋。這些資源類型非常適合共用字典提供的差異壓縮，因為靜態資源往往會長期快取，而且經常會以一定的頻率更新。
您可以設定靜態資源的 Use-As-Dictionary 回應標頭，為靜態資源指定字典。標頭採用少數鍵/值組合之一，但唯一需要的是 match。此標頭接受 URLPattern 語法，指定應使用字典的資源路徑：
Use-As-Dictionary: match="/dist/styles.*.css"
您可以將 Use-As-Dictionary 標頭視為一種機制，只要日後有符合指定模式的資源版本，該版本就會套用。因此，假設您的網站在單一 CSS 檔案中寄送所有樣式。為了簡化說明，假設該資源的第一個版本位於 /dist/styles.v1.css，並傳送包含 match 值為 /dist/styles.*.css 的 Use-As-Dictionary 回應標頭。
一段時間後，您就會更新網站的 CSS，並透過 /dist/styles.v2.css 提供新版網站。由於先前版本 Use-As-Dictionary 回應標頭中使用的 match 值會套用至這項要求，因此瀏覽器會傳送 Available-Dictionary 標頭，其中包含編碼為結構化欄位位元組序列的字典雜湊碼：
Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:
此時，是由伺服器自行設定壓縮，以確保使用相符的字典。系統會傳送使用該字典壓縮的資源，使用者瀏覽器快取中的可用字典則將用於解壓縮。
如果您經常為網站推送新的程式碼，差異壓縮功能就能帶來很長的時間。不過，這項程序的靈活度很高。如果瀏覽器無法判斷使用者瀏覽器快取中可用的字典，就不會在 Accept-Encoding 標頭中指定額外的 br-d 或 zstd-d 權杖。在這種情況下，系統會套用標準壓縮流程。
動態資源的共用字典壓縮
動態資源也受益於共用字典壓縮。動態資源是因情境而變動的資源，例如，新聞網站經常以新聞休息時間更新主要網頁。HTML 文件通常是動態資源。在此例中，字典可以包含網站中大部分常見的 HTML 結構和範本程式碼，這些程式碼可指向壓縮網頁，且系統只會傳送每個網頁的唯一部分。
基於動態產生的資源的特性，您必須在用戶端載入字典供日後使用。預先載入字典，意味著將共用字典壓縮套用至動態資源是推測而有的。希望您的網站收到足夠的流量，可供大量瀏覽作業需要分攤字典費用。如果決定試用，第一步就是透過網頁 HTML 中的 <link> 元素指定字典的位置：
<link rel="dictionary" href="/dictionary.dat">
Chrome 遇到這個 <link> 元素時，「可以」在網頁閒置時擷取字典，且設為低優先順序，目的是避免發生頻寬爭用的情形。字典本身的回應必須指定 Use-As-Dictionary 標頭，並指定要套用的動態資源路徑：
Use-As-Dictionary: match="/product/*"
在這裡，流程與靜態資源大致相同。瀏覽器會看到字典本身套用至相符的資源，瀏覽器也會將 Available-Dictionary 標頭附加至要求，其中包含字典內容雜湊的雜湊值，類似先前說明的靜態資源流程。
在建構期間壓縮靜態資源
如果您熟悉整合工具，可能會很熟悉各種外掛程式，這些外掛程式可以在建構期間壓縮資源，然後提供這些壓縮資源。例如，Apache 允許您在要求時使用指令，提供這些預先壓縮資源。
大多數支援壓縮的 Node.js 組合器都會使用 Node 內建的 Zlib 程式庫。Zlib 支援 Brotli 和軟體包，其通常提供將選項直接傳遞給 Zlib (支援字典輔助壓縮) 的介面。以下列舉幾種支援使用字典的整合工具：
- Webpack 的
CompressionWebpackPlugin，透過其compressionOptions介面。 rollup-plugin-brotli提供options設定，可在 Node.js 中直接傳遞至 Zlib，您可在其中指定字典。- 這個版本的
esbuild-plugin-compress第三方外掛程式也能讓您存取 Node.js 中的 Zlib 選項。
請注意，資源的任何版本可用的字典，都可能使用資源的任何先前版本。因此必須分析使用者流量，並據此進行規劃。盡可能在兩者之間取得平衡，並盡可能產生有助於吸引回訪者最多的資源。CDN 供應商目前正在實驗共用字典壓縮功能。目前還沒有開放大眾使用的實作，但我們應該能進行變更！
快來體驗看看！
整合共用字典壓縮功能和瀏覽器現有的壓縮功能，對於經常發布更新版程式碼的網站，以及從回訪者獲得大量流量的網站，就有機會大幅提升載入效能。如想提供共用字典壓縮攝影，有兩種方法：
- 如果只是想使用共用字典壓縮功能測試運作方式，可以在
chrome://flags頁面上啟用「Compression dictionaryTransport」實驗功能。 - 如果您想在實際網站上試用這項功能，並瞭解共用字典壓縮功能可為實際使用者帶來什麼好處，請註冊來源試用以取得權杖，並瞭解來源試用的運作方式。
結論
我們很高興這股網路壓縮技術的重大進展，也非常期待能加快這些技術在人們日常使用的現有應用程式速度上。我們鼓勵您試用這項工具，最重要的是，歡迎告訴我們您的想法！如果您發現錯誤，請前往 crbug.com 提交。如需其他資源和工具，請前往 use-as-dictionary.com。最後，如果想深入瞭解各項功能的運作方式，不妨參考說明內容。