Pre-compress web assets using Brotli

lib/web/apiserver.go

@@ -675,7 +675,7 @@ func NewHandler(cfg Config, opts ...HandlerOption) (*APIHandler, error) {
 
 			fs := http.FileServer(cfg.StaticFS)
 
-			fs = makeGzipHandler(fs)
+			fs = makeBrotliHandler(fs, cfg.StaticFS)
 			fs = makeCacheHandler(fs, etag)
 
 			http.StripPrefix("/web", fs).ServeHTTP(w, r)

lib/web/brotlihandler.go

@@ -0,0 +1,69 @@
+/*
+ * Teleport
+ * Copyright (C) 2025  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package web
+
+import (
+	"io"
+	"mime"
+	"net/http"
+	"path"
+	"slices"
+	"strings"
+)
+
+var compressedFileExtensions = []string{
+	".js",
+	".svg",
+	".wasm",
+}
+
+// makeBrotliHandler serves pre-compressed .br files for supported file types.
+func makeBrotliHandler(handler http.Handler, fs http.FileSystem) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		ext := path.Ext(r.URL.Path)
+		isRequestForCompressedFile := slices.Contains(compressedFileExtensions, ext)
+		clientAcceptsBrotli := strings.Contains(r.Header.Get("Accept-Encoding"), "br")
+		if !isRequestForCompressedFile || !clientAcceptsBrotli {
+			handler.ServeHTTP(w, r)
+			return
+		}
+
+		brPath := r.URL.Path + ".br"
+		brFile, err := fs.Open(brPath)
+		if err != nil {
+			handler.ServeHTTP(w, r)
+			return
+		}
+		defer brFile.Close()
+
+		contentType := mime.TypeByExtension(ext)
+		if contentType == "" {
+			contentType = "application/octet-stream" // same default as http.DetectContentType
+		}
+
+		w.Header().Set("Content-Encoding", "br")
+		w.Header().Set("Content-Type", contentType)
+
+		if r.Method == http.MethodHead {
+			return
+		}
+
+		io.Copy(w, brFile)
+	})
+}

web/README.md

@@ -39,7 +39,12 @@ To build the Teleport open source version
 pnpm build-ui-oss
 ```
 
-The resulting output will be in the `webassets` folder.
+The resulting output will be in the `webassets` folder. By default, the webassets are compressed with Brotli. If you 
+want to disable this for faster local builds, set the environment variable `VITE_DISABLE_COMPRESSION` to any value:
+
+```
+VITE_DISABLE_COMPRESSION=1 pnpm build-ui-oss
+```
 
 ### Docker Build
 

web/packages/build/package.json

@@ -34,6 +34,7 @@
     "jsdom": "^26.1.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "typescript-eslint": "^8.35.1",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-wasm": "^3.4.1",
     "vite-tsconfig-paths": "^5.1.4"
   }

web/packages/build/vite/config.ts

@@ -21,6 +21,7 @@ import { resolve } from 'path';
 
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, type UserConfig } from 'vite';
+import compression from 'vite-plugin-compression';
 import wasm from 'vite-plugin-wasm';
 
 import { generateAppHashFile } from './apphash';
@@ -98,6 +99,18 @@ export function createViteConfig(
 
     if (mode === 'production') {
       config.base = '/web';
+
+      if (!process.env.VITE_DISABLE_COMPRESSION) {
+        config.plugins.push(
+          compression({
+            algorithm: 'brotliCompress',
+            deleteOriginFile: true,
+            filter: /\.(js|svg|wasm)$/,
+            threshold: 1024 * 10, // 10KB
+            verbose: false,
+          })
+        );
+      }
     } else {
       config.plugins.push(htmlPlugin(target));
       // siteName matches everything between the slashes.