How to Reduce Bundle Size in Angular: Best Practices

To reduce bundle size in Angular, use lazy loading to load modules only when needed, enable tree shaking to remove unused code, and configure production builds with optimizations like minification and Ahead-of-Time (AOT) compilation. These techniques help your app load faster and use less bandwidth.

Syntax

Here are key Angular features and commands to reduce bundle size:

• Lazy Loading Modules: Use loadChildren in routing to load modules on demand.
• Production Build: Run ng build --configuration production to enable optimizations like AOT, minification, and tree shaking.
• Angular CLI Configuration: Adjust angular.json to enable budgets and optimization flags.

typescript

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

// Build command
ng build --configuration production

Example

This example shows how to set up lazy loading for a feature module and build the app for production to reduce bundle size.

typescript

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// Build command in terminal
// ng build --configuration production

Output

Build completed. Bundle size is minimized with lazy loading and production optimizations.

Common Pitfalls

Common mistakes when trying to reduce bundle size include:

• Not using lazy loading, causing all modules to load upfront.
• Building without --configuration production, missing optimizations like minification and AOT.
• Importing large libraries directly in main modules instead of lazy-loaded modules.
• Not enabling buildOptimizer or budgets in angular.json.

Always check your bundle with tools like source-map-explorer to find large dependencies.

typescript

/* Wrong: Importing heavy library in app.module.ts */
import { BigLibraryModule } from 'big-library';

@NgModule({
  imports: [BigLibraryModule] // This increases initial bundle size
})
export class AppModule {}

/* Right: Import BigLibraryModule in a lazy-loaded feature module */
@NgModule({
  imports: [BigLibraryModule]
})
export class FeatureModule {}

Quick Reference

• Use lazy loading for feature modules with loadChildren.
• Build with production flag: ng build --configuration production.
• Enable build optimizer and budgets in angular.json.
• Avoid importing large libraries in root modules.
• Analyze bundles with tools like source-map-explorer.

Key Takeaways

Use lazy loading to load modules only when needed, reducing initial bundle size.

Always build your Angular app with the production flag to enable optimizations.

Avoid importing large libraries in the root module; import them in lazy-loaded modules instead.

Configure build optimizer and budgets in angular.json to catch bundle size issues early.

Use bundle analysis tools to identify and remove unnecessary code.