static: Pre-compress with zopfli, for better compression.

Zopfli[^1] performs very good, but time-intensive, zlib compression.
It is hence only suitable for pre-compressing objects, not on-the-fly
compression.

Use a webpack plugin to write pre-compressed versions of JS and CSS
assets using Zopfli, and configure nginx to serve those assets when
`Accept-Encoding: gzip` is provided.

This reduces the size of the JS and CSS assets on initial pageload
from 1422872 bytes to 1108267 bytes, or about a 22% savings.

[^1]: https://github.com/google/zopfli

web/webpack.config.ts

@@ -2,6 +2,9 @@
 
 import path from "path";
 
+import type {ZopfliOptions} from "@gfx/zopfli";
+import {gzip} from "@gfx/zopfli";
+import CompressionPlugin from "compression-webpack-plugin";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
@@ -218,6 +221,11 @@ const config = (
                 chunks: ["error-styles"],
                 publicPath: production ? "/static/webpack-bundles/" : "/webpack/",
             }),
+            new CompressionPlugin<ZopfliOptions>({
+                // Use zopfli to write pre-compressed versions of text files
+                test: /\.(js|css|html)$/,
+                algorithm: gzip,
+            }),
         ],
         devServer: {
             client: {