CodeForPhilly / CodeForPhilly/codeforphilly-ng

Code-split the apps/web bundle

Offen
#31 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
1
Forks
1
Ø Merge
5 T. 3 Std.
Gemergte PRs (30 T.)
9

Beschreibung

**Context:** PR #28 ships every public screen statically imported by `App.tsx`. The production bundle is 550 kB (164 kB gzipped), which vite warns about at build time.

The cheapest fix is `React.lazy()` on each screen so each route splits naturally. The shell + home are the hot path; everything else can lazy-load.

**Acceptance:**

- [ ] No single chunk > 200 kB gzipped
- [ ] First-paint route (`/`) loads only the hero + shell-needed code
- [ ] Smoke tests still pass (lazy + Suspense boundary doesn't break the render harness)

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Lies zunächst App.tsx und die statischen Screen-Imports, die durch PR #28 eingeführt wurden, und führe dann den vorhandenen Produktions-Build sowie die Smoke-Tests aus, um die Ausgangsbasis festzuhalten. Teile die Screens so auf, dass die Home-Route nur den Shell- und Hero-Code enthält, und überprüfe, dass kein Chunk 200 kB gzip-komprimiert überschreitet und die Smoke-Tests weiterhin erfolgreich gerendert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript, vite
Bereich
build-system, frontend, performance
Issue-Typ
Refactoring
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
68/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.