Angular App Optimization Techniques

Go Back

Level : Advanced

Go Back

Mentor: Shailendra Chauhan

Duration : 00:04:00

Get Details

Angular App Optimization Techniques

Optimize your Angular application for better performance and reduced loading times using various techniques.

Example

# Example: Generate a production build with Angular CLI
ng build --prod

Looking into Bundle

Analyze your application's bundles to identify and address any size-related issues.

Example

# Example: Analyze bundle sizes using Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/stats.json

Adding Source Map Explorer

Utilize Source Map Explorer to visualize and understand the composition of your application's source maps.

Example

# Example: Install and use Source Map Explorer
npm install -g source-map-explorer
source-map-explorer dist/main.<hash>.js

Lazy Loading

Implement lazy loading to load parts of your Angular application on-demand, improving initial load times.

Example

// Example: Lazy load a module in your route configuration
const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

Enabling Lazy Loading

Enable lazy loading in your Angular application's configuration for specific feature modules.

Example

// Example: Configure lazy loading in your application
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Removing Shared Module

Remove unnecessary shared modules to reduce the size of your bundles and improve load times.

Example

// Example: Eliminate shared module imports if not needed
@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [SomeComponent]
})
export class FeatureModule { }

Specifying Budgets

Set budgets for your application's bundle sizes to prevent bloat and maintain performance.

Example

// Example: Specify bundle size budgets in your Angular.json file
"configurations": {
  "production": {
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ]
  }
}

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.