Code Splitting and Chunk Strategy

Code splitting divides your application into smaller chunks that load on demand, reducing the initial download size.

Route-Level Lazy Loading

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
  },
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.component').then(m => m.ReportsComponent),
  },
];

Bundle Structure

dist/my-app/browser/
├── main.js              # App shell + essential code
├── polyfills.js         # Browser polyfills
├── runtime.js           # Webpack runtime
├── styles.css           # Global styles
├── admin-XXXX.js        # Lazy-loaded admin chunk
├── reports-XXXX.js      # Lazy-loaded reports chunk
└── assets/

Analyzing Bundle Size

# Build with stats JSON
ng build --stats-json

# Analyze with webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/my-app/browser/stats.json

This produces an interactive treemap showing which modules contribute most to bundle size.

Common Bundle Size Issues

Extracting shared vendor code into a separate chunk prevents duplication across lazy-loaded routes.

Default Vendor Chunk

Angular CLI automatically extracts vendor code:

{
  "architect": {
    "build": {
      "options": {
        "outputHashing": "all",
        "namedChunks": true
      }
    }
  }
}

Manual Chunk Configuration

{
  "architect": {
    "build": {
      "options": {
        "commonChunk": true,
        "vendorChunk": true
      }
    }
  }
}

Preloading Strategy

import { provideRouter, withPreloading } from '@angular/router';
import { PreloadAllModules } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllModules)),
  ],
};

Verifying Code Splitting

# Build for production
ng build --configuration production

# Check the dist folder for separate chunks
dist/my-app/browser/
├── main.js
├── admin-XXXX.js
└── reports-XXXX.js

Each lazy-loaded route produces a separate chunk file.