Skip to content

perf: preload all route chunks on app load#185

Merged
AugustoL merged 1 commit intoopenscan-explorer:devfrom
AugustoL:perf/preload-all-routes
Jan 29, 2026
Merged

perf: preload all route chunks on app load#185
AugustoL merged 1 commit intoopenscan-explorer:devfrom
AugustoL:perf/preload-all-routes

Conversation

@AugustoL
Copy link
Collaborator

Description

Add eager preloading of all lazy-loaded route chunks to eliminate navigation delay caused by on-demand chunk downloading.

How It Improves Loading Time

Before (On-Demand Loading)

User clicks link → Download chunk (200-500ms) → Parse JS → Render page
                   ↑ Network delay

Each navigation to a new page required downloading the JavaScript chunk for that route on-demand, causing a visible delay while the user waits.

After (Eager Preloading)

App loads → Background: Download ALL chunks → Cache in browser

User clicks link → Chunk already cached → Render page (instant)

Once the app is fully loaded, all 18 route chunks are preloaded in the background. When the user navigates, the chunk is already in the browser cache, eliminating the download delay.

Loading Workflow Change

Previous Workflow

  1. App loads initial chunk (main bundle)
  2. User navigates to /blocks
  3. Wait: Browser downloads blocks-[hash].js chunk
  4. React renders the Blocks component

New Workflow

  1. App loads initial chunk (main bundle)
  2. App becomes ready (fullyReady = true)
  3. Background: preloadAllRoutes() triggers download of all 18 page chunks
  4. User navigates to /blocks
  5. Chunk already cached → React renders immediately

Trade-offs

Aspect Before After
Initial bandwidth Lower (~50KB) Higher (~200-400KB total)
First navigation 200-500ms delay Near-instant
Subsequent navigation Cached Cached

The trade-off is slightly higher initial bandwidth usage in exchange for instant navigation throughout the app.

Related Issue

N/A - Performance optimization

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactoring
  • Performance improvement
  • Other (please describe):

Changes Made

  • src/components/LazyComponents.tsx: Added preloadAllRoutes() function that imports all 18 page chunks
  • src/App.tsx: Call preloadAllRoutes() when app is fully ready

Checklist

  • I have run npm run format:fix and npm run lint:fix
  • I have run npm run typecheck with no errors
  • I have run tests with npm run test:run
  • I have tested my changes locally
  • I have updated documentation if needed
  • My code follows the project's architecture patterns

Additional Notes

  • Preloading only starts after the app is fully ready (fullyReady = true), so it doesn't compete with initial page load
  • Each chunk is downloaded in parallel by the browser
  • Browser caching ensures chunks are not re-downloaded on subsequent visits

Add eager preloading of all lazy-loaded route chunks to eliminate
navigation delay caused by on-demand chunk downloading.
@AugustoL AugustoL changed the base branch from main to dev January 29, 2026 11:47
@github-actions
Copy link

🚀 Preview: https://pr-185--openscan.netlify.app
📝 Commit: 577163ea6e5d30813307584baba4862c11ede678

@MatiasOS MatiasOS self-requested a review January 29, 2026 13:38
@AugustoL AugustoL merged commit f24cd78 into openscan-explorer:dev Jan 29, 2026
2 checks passed
@AugustoL AugustoL mentioned this pull request Jan 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants