Reduce Ionic App Startup Time with Lazy‑Loaded Pages

Problem: Large initial bundle slows first interaction

When an Ionic project bundles every page into the main JavaScript file, the initial download can become several megabytes. On slower mobile networks this delays the moment the user can see and interact with the UI, hurting perceived performance.

Thesis: Lazy‑loading each page as its own Angular feature module splits the bundle, shrinking the main payload and loading code only when the route is visited.

How Ionic’s lazy loading works

Ionic relies on Angular’s Router. By declaring a page inside its own NgModule and referencing that module with loadChildren, the Angular CLI (or Vite) creates a separate chunk that is fetched on first navigation. The IonRouterOutlet and NavController continue to work because navigation still resolves through the Angular Router.

Worked example: lazy‑loading a Home page

1. Create the page module (src/app/pages/home/home.module.ts):

   import { NgModule } from '@angular/core';
   import { IonicModule } from '@ionic/angular';
   import { HomePage } from './home.page';
   import { HomePageRoutingModule } from './home-routing.module';
   
   @NgModule({
     imports: [
       IonicModule,
       HomePageRoutingModule
     ],
     declarations: [HomePage]
   })
   export class HomePageModule {}
   

2. Define the routing for the module (src/app/pages/home/home-routing.module.ts):

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   import { HomePage } from './home.page';
   
   const routes: Routes = [
     {
       path: '',
       component: HomePage
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class HomePageRoutingModule {}
   

3. Reference the module from the app router (src/app/app-routing.module.ts):

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   
   const routes: Routes = [
     {
       path: 'home',
       loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
     },
     { path: '', redirectTo: 'home', pathMatch: 'full' }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule {}
   

After these changes, run a development build and open Chrome DevTools → Network. Navigate to /home; you should see a new chunk (e.g., src_app_pages_home_home_module_ts.js) downloaded only on that first visit.

Trade‑offs and limitations

• Initial complexity: Each page now requires its own module and routing file, adding a small amount of boilerplate.
• Service scoping: Providing a service inside a lazy page module creates a new instance for that feature. If you need a singleton, keep the provider in AppModule or a core module.
• Testing impact: Unit tests that import the page component directly must also import its feature module or provide suitable mocks, otherwise Angular’s TestBed will complain about missing declarations.
• Version sensitivity: The loadChildren syntax shown works with Angular ≥ 8 and Ionic ≥ 5. If you adopt standalone components, the pattern changes; verify your project’s supported approach before refactoring.

Actionable next steps

1. Pick a page that is not needed on the very first screen (e.g., a settings or detail page).
2. Follow the three‑step pattern above to move it into its own lazy‑loaded module.
3. Build for production (npm run build -- --prod for Angular CLI or npm run build for Vite) and inspect the www/assets folder. Verify that the main JavaScript file is smaller and that a separate chunk appears for the lazy route.
4. Optionally run a bundle‑analysis tool (source-map-explorer or rollup-plugin-visualizer) to visualize the split.
5. Repeat for additional pages, monitoring the bundle size after each migration.

By applying lazy loading, you keep the initial payload light, improve startup speed on constrained networks, and retain full Ionic navigation capabilities.