Perf: pre-compile JSX, prod React, WebP assets, immutable cache

This is the big "make scrolling smooth" pass — the biggest wins live
in cold-start, not in the scroll loop itself, but a fast cold start
means GSAP starts in a non-thrashing state and stays there.

- Drop @babel/standalone (~3MB) from the page entirely. app.jsx is
  pre-compiled to app.js via deploy/build.sh; the browser loads the
  compiled bundle directly. JSX-in-browser was running babel transform
  on every page load, which is brutal on phones.
- Switch React UMD bundles from .development to .production.min:
  ~1.1MB → ~140KB, no dev-mode warnings/checks in the hot path.
- Add `defer` + `<link rel=preload as=script>` for the React/GSAP CDN
  scripts so they fetch in parallel with HTML parse, execute in order
  after DOM is ready, and don't block first paint.
- Re-encode the three 1.4–1.8MB PNG backgrounds as WebP at full size
  (~190KB total) plus a 900px-wide mobile variant (~52KB total).
  Mobile preload links use `media=` so phones never download the
  full-size variants.
- Move bg-image URLs from inline JSX styles into styles.css so the
  mobile media query can swap them in cleanly.
- nginx: long-cache versioned static assets (Cache-Control immutable,
  1 year) since URLs already carry ?v=… cache busters; keep the HTML
  itself on must-revalidate so the version pointer can update.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-03 03:17:38 +08:00
parent dbe965d0e9
commit b510b33628
13 changed files with 818 additions and 32 deletions

View File

@@ -94,6 +94,13 @@ a { color: inherit; text-decoration: none; }
image-rendering: -webkit-optimize-contrast;
}
/* WebP-encoded backgrounds for each scene. Default is the full-res
variant; the mobile media query below swaps in a smaller one so
phones decode ~50KB instead of ~190KB. */
.scene-hero .bg-image { background-image: url("assets/exterior-factory.webp"); }
.scene-product .bg-image { background-image: url("assets/factory-interior.webp"); }
.scene-install .bg-image { background-image: url("assets/pcb-chip.webp"); }
.vignette {
position: absolute;
inset: 0;
@@ -931,6 +938,11 @@ a { color: inherit; text-decoration: none; }
.scene-product .bg-wrap { transform-origin: 55% 70% !important; }
.scene-install .bg-wrap { transform-origin: 70% 55% !important; }
/* Use the smaller WebP variants — ~52KB total instead of ~190KB. */
.scene-hero .bg-image { background-image: url("assets/exterior-factory-mobile.webp"); }
.scene-product .bg-image { background-image: url("assets/factory-interior-mobile.webp"); }
.scene-install .bg-image { background-image: url("assets/pcb-chip-mobile.webp"); }
/* Hero: center the (now responsively sized) logo. */
.content-hero {
align-items: center;