Add gzip pre-compression plugin and optimize Vite chunk splitting

Add a Vite build plugin that generates .gz copies of assets for sirv to
serve pre-compressed. Split socket.io and radix-ui into separate chunks
for better caching. Refactor lighthouse benchmark to use `reflex run
--env prod` directly instead of AppHarnessProd.

Author: FarhanAliRaza

packages/reflex-base/src/reflex_base/.templates/web/vite-plugin-compress.js

@@ -0,0 +1,60 @@
+/* vite-plugin-compress.js
+ *
+ * Generate pre-compressed .gz copies of build assets so that sirv (the
+ * production static file server) can serve them directly.  sirv has built-in
+ * support for pre-compressed files (--gzip flag, enabled by default) but only
+ * looks for existing .gz files on disk -- it does not compress on-the-fly.
+ *
+ * Without this plugin the browser receives uncompressed assets, which is the
+ * single biggest Lighthouse performance bottleneck for Reflex apps.  With gzip
+ * the total asset payload typically shrinks by ~75-80%.
+ */
+
+import { promisify } from "node:util";
+import { gzip } from "node:zlib";
+
+const gzipAsync = promisify(gzip);
+
+const COMPRESSIBLE_EXTENSIONS = /\.(js|css|html|json|svg|xml|txt|map|mjs)$/;
+
+// Only compress files above this size (bytes).  Tiny files don't benefit
+// and the overhead of Content-Encoding negotiation can outweigh the saving.
+const MIN_SIZE = 256;
+
+/**
+ * Vite plugin that generates .gz files for all eligible build assets.
+ * @returns {import('vite').Plugin}
+ */
+export default function compressPlugin() {
+  return {
+    name: "vite-plugin-compress",
+    apply: "build",
+    enforce: "post",
+
+    async generateBundle(_options, bundle) {
+      const jobs = [];
+
+      for (const [fileName, asset] of Object.entries(bundle)) {
+        if (!COMPRESSIBLE_EXTENSIONS.test(fileName)) continue;
+
+        const source = asset.type === "chunk" ? asset.code : asset.source;
+        if (source == null) continue;
+
+        const raw = typeof source === "string" ? Buffer.from(source) : source;
+        if (raw.length < MIN_SIZE) continue;
+
+        jobs.push(
+          gzipAsync(raw, { level: 9 }).then((compressed) => {
+            this.emitFile({
+              type: "asset",
+              fileName: fileName + ".gz",
+              source: compressed,
+            });
+          }),
+        );
+      }
+
+      await Promise.all(jobs);
+    },
+  };
+}

packages/reflex-base/src/reflex_base/compiler/templates.py

@@ -526,6 +526,7 @@ def vite_config_template(
 import {{ reactRouter }} from "@react-router/dev/vite";
 import {{ defineConfig }} from "vite";
 import safariCacheBustPlugin from "./vite-plugin-safari-cachebust";
+import compressPlugin from "./vite-plugin-compress";
 
 // Ensure that bun always uses the react-dom/server.node functions.
 function alwaysUseReactDomServerNode() {{
@@ -566,6 +567,7 @@ def vite_config_template(
     alwaysUseReactDomServerNode(),
     reactRouter(),
     safariCacheBustPlugin(),
+    compressPlugin(),
   ].concat({"[fullReload()]" if force_full_reload else "[]"}),
   build: {{
     assetsDir: "{base}assets".slice(1),
@@ -583,6 +585,14 @@ def vite_config_template(
               test: /env.json/,
               name: "reflex-env",
             }},
+            {{
+              test: /node_modules\/socket\.io|node_modules\/engine\.io/,
+              name: "socket-io",
+            }},
+            {{
+              test: /node_modules\/@radix-ui/,
+              name: "radix-ui",
+            }},
           ],
         }},
       }},

tests/integration/lighthouse_utils.py

@@ -5,16 +5,18 @@
 import json
 import operator
 import os
+import re
 import shlex
 import shutil
 import subprocess
+import time
 from dataclasses import dataclass
 from pathlib import Path
 from typing import Any
 
 import pytest
 
-from reflex.testing import AppHarnessProd, chdir
+from reflex.testing import chdir
 from reflex.utils.templates import initialize_default_app
 
 LIGHTHOUSE_RUN_ENV_VAR = "REFLEX_RUN_LIGHTHOUSE"
@@ -840,7 +842,10 @@ def _run_prod_lighthouse_benchmark(
     report_path: Path,
     label: str,
 ) -> LighthouseBenchmarkResult:
-    """Run Lighthouse against a Reflex app in prod mode.
+    """Run Lighthouse against a Reflex app via ``reflex run --env prod``.
+
+    Uses the real production code path so the benchmark automatically
+    reflects any future changes to how Reflex serves apps in prod.
 
     Args:
         app_root: The app root to initialize or reuse.
@@ -853,9 +858,61 @@ def _run_prod_lighthouse_benchmark(
     """
     report_path.parent.mkdir(parents=True, exist_ok=True)
 
-    with AppHarnessProd.create(root=app_root, app_name=app_name) as harness:
-        assert harness.frontend_url is not None
-        report = run_lighthouse(harness.frontend_url, report_path)
+    proc = subprocess.Popen(
+        [
+            "uv",
+            "run",
+            "reflex",
+            "run",
+            "--env",
+            "prod",
+            "--frontend-only",
+            "--loglevel",
+            "info",
+        ],
+        cwd=str(app_root),
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+        text=True,
+    )
+
+    # Wait for the frontend URL to appear in stdout.
+    frontend_url = None
+    captured_output: list[str] = []
+    deadline = time.monotonic() + 120
+    assert proc.stdout is not None
+    while time.monotonic() < deadline:
+        line = proc.stdout.readline()
+        if not line:
+            break
+        captured_output.append(line)
+        m = re.search(r"App running at:\s*(http\S+)", line)
+        if m:
+            frontend_url = m.group(1).rstrip("/")
+            break
+
+    if frontend_url is None:
+        proc.terminate()
+        try:
+            proc.wait(timeout=10)
+        except subprocess.TimeoutExpired:
+            proc.kill()
+            proc.wait()
+        output = "".join(captured_output)
+        pytest.fail(
+            f"reflex run --env prod did not start within timeout for {label}\n"
+            f"Captured output:\n{output}"
+        )
+
+    try:
+        report = run_lighthouse(frontend_url, report_path)
+    finally:
+        proc.terminate()
+        try:
+            proc.wait(timeout=10)
+        except subprocess.TimeoutExpired:
+            proc.kill()
+            proc.wait()
 
     failures = []
     for category_name, threshold in LIGHTHOUSE_CATEGORY_THRESHOLDS.items():