Three JS demo (compression dictionary transport feature static resources flow)

This demo describes how the Compression Dictionary Transport feature can be used for delta updating static JavaScript libraries.

To try this demo, please follow these instructions:

1. Use Chrome Canary or Dev (version > 117.0.5906.0).
2. Enable both chrome://flags/#enable-compression-dictionary-transport and chrome://flags/#enable-compression-dictionary-transport-backend
3. Open DevTools (Windows: F12 key, Mac: Command + Option + I), and select the Network tab.
4. Go to demo.html?r=151
   • This page is using Three.js (revision 151).
   • You can see "191kB" in the network column of "151.js".
   • The file is compressed using normal Brotli (1,198,641 bytes => 190,163 bytes)
   • When you click "151.js", you can see this new response header:

     Use-As-Dictionary: match="/js/*"

     This response header means that the content of "151.js" can be used as a shared dictionary for fetching resources under "/js/".
   • In chrome://net-internals/#sharedDictionary, you can see the registered dictionary information.
5. Go to demo.html?r=152
   • This page is using Three.js (revision 152).
   • You can see "5.9 KB" in the network column of "152.js".
   • This is compressed using Shared Brotli using the content of "151.js" as a dictionary. The original size of "152.js" is 1,208,641 bytes. And the compressed data size is 5,612bytes.
   • When you click "152.js", you can see this new request header:

     Available-Dictionary: :epjv6NymTtsZ63DPEBkyCVCh7ZlGicsjTPkBUvSQ9G4=:

     Also you can see new "br-d" and "zstd-d" Accept-Encoding types:

     Accept-Encoding: gzip, deflate, br, zstd, br-d, zstd-d

     This request header means that the browser has a dictionary with the hash, and can use Shared Brotli compression.
   • And the response header has

     Content-Encoding: zstd-d

     and

     Content-Dictionary: :epjv6NymTtsZ63DPEBkyCVCh7ZlGicsjTPkBUvSQ9G4=:

     headers. This means that the response is compressed using the dictionary.
   • Also, the response header contains the "Use-As-Dictionary" header.

     Use-As-Dictionary: match="/js/*"

     So the content of "152.js" will be used as a shared dictionary for fetching resources under "/js/".
   • In chrome://net-internals/#sharedDictionary, you can see the updated dictionary information.
6. Go to /demo.html?r=153
   • This page is using Three.js (revision 153).
   • You can see "4.3 KB" in the network column of "153.js".
   • This is compressed using Shared Brotli using the content of "152.js" as a dictionary. The original size of "153.js" is 1,223,960 bytes. And the compressed data size is 4,077 bytes.
   • In chrome://net-internals/#sharedDictionary, you can see the updated dictionary information.

The source code of this demo is available at GitHub.