Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Code-split the apps/web bundle

Open
#31 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Refactor
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript, vite

Research direction

Start by reading App.tsx and the static screen imports introduced by PR #28, then run the existing production build and smoke tests to establish the baseline. Split the screens so the home route keeps only the shell and hero code, and verify that no chunk exceeds 200 kB gzipped and the smoke tests still render successfully.

Written by the indexing model from the issue text.

Description

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)
Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
1d 20h
Merged PRs (30d)
25

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeForPhilly/codeforphilly-ng

All issues in CodeForPhilly/codeforphilly-ng

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.