Skip to content

Reduce initial bundle size via lazy loading #553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
bracyw wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

Reduce initial bundle size via lazy loading #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
002e00f
#199 Reduce initial bundle size via lazy loading and route-level code…
bracyw Mar 12, 2026
19ff00c
#199 resolve merge conflict with develop, add efuses lazy route
bracyw Mar 29, 2026
3833ab6
#199 simplify route comment to reference ticket
bracyw Mar 29, 2026
0dcb395
#199 apply prettier formatting
bracyw Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 48 additions & 32 deletions angular-client/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BmsDebugPageComponent } from 'src/pages/bms-debug-page/bms-debug-page.component';
import { BmsSegmentViewComponent } from 'src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component';
import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component';
import CarCommandComponent from 'src/pages/car-command-page/car-command.component';
import ChargingPageComponent from 'src/pages/charging-page/charging-page.component';
import EfusesPageComponent from 'src/pages/efuses-page/efuses-page.component';
import FaultPageComponent from 'src/pages/fault-page/fault-page.component';
import GraphPageComponent from 'src/pages/graph-page/graph-page.component';
import LandingPageComponent from 'src/pages/landing-page/landing-page.component';
import MapComponent from 'src/pages/map/map.component';
import { Routes } from '@angular/router';
import { Segment } from 'src/utils/bms.utils';

const landingRoute = () => `/landing`;
Expand Down Expand Up @@ -38,25 +27,52 @@ export const appRoutes = {
efusesRoute
};

// Routes should be defined carefully in accordance with the appRoutes
const routes: Routes = [
{ path: 'landing', component: LandingPageComponent },
{ path: 'graph', component: GraphPageComponent },
// Lazy-loaded routes: each page is split into its own chunk to reduce initial bundle size (#199).
export const routes: Routes = [
{
path: 'landing',
loadComponent: () => import('src/pages/landing-page/landing-page.component')
},
{
path: 'graph',
loadComponent: () => import('src/pages/graph-page/graph-page.component')
},
{ path: '', redirectTo: appRoutes.landingRoute(), pathMatch: 'full' },
{ path: 'map', component: MapComponent },
{ path: 'charging', component: ChargingPageComponent },
{ path: 'bms', component: BmsDebugPageComponent },
// NOTE: paramaterized routes should be even more carefully defined in accordance with the appRoutes
{ path: 'bms/segment/:id', component: BmsSegmentViewComponent },
{ path: 'faults', component: FaultPageComponent },
{ path: 'faults/fault-graph', component: GraphPageComponent },
{ path: 'camera', component: CameraPageComponent },
{ path: 'commands', component: CarCommandComponent },
{ path: 'efuses', component: EfusesPageComponent }
{
path: 'map',
loadComponent: () => import('src/pages/map/map.component')
},
{
path: 'charging',
loadComponent: () => import('src/pages/charging-page/charging-page.component')
},
{
path: 'bms',
loadComponent: () => import('src/pages/bms-debug-page/bms-debug-page.component').then((m) => m.BmsDebugPageComponent)
},
{
path: 'bms/segment/:id',
loadComponent: () =>
import('src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component').then((m) => m.BmsSegmentViewComponent)
},
{
path: 'faults',
loadComponent: () => import('src/pages/fault-page/fault-page.component')
},
{
path: 'faults/fault-graph',
loadComponent: () => import('src/pages/graph-page/graph-page.component')
},
{
path: 'camera',
loadComponent: () => import('src/pages/camera-page/camera-page.component').then((m) => m.CameraPageComponent)
},
{
path: 'commands',
loadComponent: () => import('src/pages/car-command-page/car-command.component')
},
{
path: 'efuses',
loadComponent: () => import('src/pages/efuses-page/efuses-page.component')
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
62 changes: 4 additions & 58 deletions angular-client/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,69 +6,15 @@ import { provideClientHydration, BrowserModule, bootstrapApplication } from '@an
import Lara from '@primeng/themes/aura';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import { AppRoutingModule } from './app/app-routing.module';
import { CarouselModule } from 'primeng/carousel';
import { NgApexchartsModule } from 'ng-apexcharts';
import { ToastModule } from 'primeng/toast';
import { OrderListModule } from 'primeng/orderlist';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { MatIconModule } from '@angular/material/icon';
import { MatGridListModule } from '@angular/material/grid-list';
import { ButtonModule } from 'primeng/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { SidebarModule } from 'primeng/sidebar';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { SelectModule } from 'primeng/select';
import { AccordionModule } from 'primeng/accordion';
import { TableModule } from 'primeng/table';
import { TreeModule } from 'primeng/tree';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { PasswordModule } from 'primeng/password';
import { provideRouter } from '@angular/router';
import { routes } from './app/app-routing.module';
import { importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
import AppContextComponent from './app/context/app-context.component';
import { ToggleSwitchModule } from 'primeng/toggleswitch';

bootstrapApplication(AppContextComponent, {
providers: [
importProvidersFrom(
BrowserModule,
AppRoutingModule,
CarouselModule,
NgApexchartsModule,
NgApexchartsModule,
ToastModule,
OrderListModule,
ProgressSpinnerModule,
MatIconModule,
MatGridListModule,
DynamicDialogModule,
ButtonModule,
MatToolbarModule,
MatButtonModule,
MatInputModule,
ReactiveFormsModule,
MatCardModule,
MatDividerModule,
SidebarModule,
MatSelectModule,
MatFormFieldModule,
FormsModule,
SelectModule,
AccordionModule,
TableModule,
TreeModule,
InputTextModule,
InputNumberModule,
PasswordModule,
ToggleSwitchModule
),
provideRouter(routes),
importProvidersFrom(BrowserModule, DynamicDialogModule),
DialogService,
MessageService,
ChipFaultPipe,
Expand Down