perf(web): --wasm (skwasm) renderer + boot resource hints — ~40% smaller cold load (#2363) - #28
Merged
Merged
Conversation
Two cold-boot improvements on top of the modern-template work (#27): 1. --wasm: build with the skwasm renderer instead of CanvasKit. Measured gzipped cold-load transfer: CanvasKit 715KB app js + 2.9MB canvaskit = ~3.6MB truly-cold skwasm 761KB app wasm + 1.46MB skwasm = ~2.2MB truly-cold (~40% less) Verified: builds clean (no code changes), boots with NO cross-origin isolation headers (flutter-view mounts, no SharedArrayBuffer/COI error) — skwasm falls back to single-threaded without COOP/COEP, so signInWithPopup (auth_service.dart:103) is NOT broken. dart2wasm auto-ships a JS+CanvasKit fallback for browsers without WasmGC (Safari <18.2 etc). Bonus: wasm starts faster than parsing equivalent JS. Caveat: CanvasKit is older/more widely gstatic-cached than skwasm, so the realised win is smaller for users who've hit other Flutter apps — but real for first-timers, mobile, and the fresh-deploy path. 2. Resource hints: preconnect the hosts the app contacts right after boot (www.gstatic.com for the engine+SDK; firestore/identitytoolkit/securetoken googleapis for Firebase data+auth) so their TCP+TLS handshake overlaps the engine download during the splash instead of paying a cold handshake after. RENDERING NOT YET VISUALLY CONFIRMED under skwasm — headless has no WebGL. The PR preview-channel deploy is the gate: eyeball the canvas (custom painters, teal/terracotta nodes, contribution edges, shadows) renders identically to CanvasKit before merge. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Visit the preview URL for this PR (updated for commit 2179f91): https://domain-visualiser-app--pr28-feat-wasm-and-resour-hg211rwb.web.app (expires Tue, 18 Aug 2026 06:17:39 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 0becdc05fe3c2187f0b584b6fed0b0a8209712f6 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #27 (modern boot + splash). Two cold-boot improvements.
1.
--wasm(skwasm renderer)Measured gzipped cold-load transfer:
--wasm(skwasm)--wasmbuild boots with no cross-origin-isolation headers —flutter-viewmounts, noSharedArrayBuffer/crossOriginIsolatederror. skwasm falls back to single-threaded without COOP/COEP, sosignInWithPopup(auth_service.dart:103) is untouched. (Corrects the old "wasm needs COI → breaks popup auth" assumption — no longer true on 3.44.)2. Resource hints
preconnectthe hosts the app hits right after boot (www.gstatic.comengine+SDK;firestore/identitytoolkit/securetoken.googleapis.comfor Firebase data+auth) so their TCP+TLS handshake overlaps the engine download during the splash instead of a cold handshake after.Headless has no WebGL, so I could confirm
--wasmboots but not that the canvas renders identically. skwasm and CanvasKit are different Skia backends. This PR's preview-channel deploy is the gate: eyeball the canvas — custom painters, teal Person circles / terracotta Repo cards, grey contribution edges, shadows — against the CanvasKit version before merging.🤖 Generated with Claude Code