Skip to content

Reduce initial bundle size via lazy loading#553

Draft
bracyw wants to merge 4 commits intodevelopfrom
199-reduce-initial-bundle-size
Draft

Reduce initial bundle size via lazy loading#553
bracyw wants to merge 4 commits intodevelopfrom
199-reduce-initial-bundle-size

Conversation

@bracyw
Copy link
Copy Markdown
Collaborator

@bracyw bracyw commented Mar 29, 2026

Changes

Converted all page-level routes from eagerly imported components to lazy-loaded routes using loadComponent with dynamic imports. This splits each page into its own chunk so the browser only downloads code for the current route, cutting the initial bundle size significantly. Also removed ~30 eagerly imported NgModule re-exports (PrimeNG, Angular Material, Forms, etc.) from main.ts that were bundled upfront as dead weight -- standalone components already import what they need individually.

In app-routing.module.ts, all component route definitions were replaced with loadComponent arrow functions and the AppRoutingModule NgModule class was removed in favor of exporting routes directly. In main.ts, switched to provideRouter(routes) for standalone bootstrapping and dropped the bulk importProvidersFrom call. Only BrowserModule and DynamicDialogModule remain as root providers.

Test Cases

  • Navigate to each route (/landing, /graph, /map, /charging, /bms, /bms/segment/:id, /faults, /faults/fault-graph, /camera, /commands, /efuses) and confirm the page loads correctly
  • Confirm the root redirect (/ -> /landing) still works
  • Verify named exports (BmsDebugPageComponent, BmsSegmentViewComponent, CameraPageComponent) resolve correctly via .then((m) => m.ComponentName)
  • Check browser DevTools Network tab to confirm chunks are loaded on navigation rather than upfront

Checklist

  • All commits are tagged with the ticket number
  • No linting errors / newline at end of file warnings
  • All code follows repository-configured prettier formatting
  • No merge conflicts
  • All checks passing
  • No package-lock.json changes (unless dependencies have changed)
  • Request reviewers & ping on Slack
  • PR is linked to the ticket

Closes #199

bracyw and others added 4 commits March 12, 2026 05:47
… splitting

Convert all route components to use loadComponent for lazy loading instead of
eager imports. Remove bulk NgModule imports from main.ts bootstrap since
standalone components already import what they need. Initial bundle drops from
4.43 MB to 1.47 MB (67% reduction).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bracyw bracyw marked this pull request as draft March 29, 2026 18:34
@bracyw bracyw self-assigned this Mar 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.

Reduce Initial Bundle Size

1 participant