如何提升Angular 4/6应用加载速度？Angular 6懒加载路由优化

Hey there! Let's tackle that slow lazy loading issue in your Angular 6 project. I’ve dealt with similar problems before, so here are several proven ways to speed up your app’s load time and make those route transitions feel snappier:

• Enable Production Build with AOT Compilation: Angular 6 supports AOT (Ahead-of-Time) compilation by default in production builds, but it’s worth double-checking you’re leveraging it. Run ng build --prod instead of a regular ng build—this pre-compiles your templates, cuts down bundle size, and eliminates runtime compilation overhead that slows down route loads.
• Split Chunks More Granularly: If your lazy modules are still too bulky, break them into smaller sub-modules. For example, if a feature module has components that aren’t always used together, split them into separate lazy-loaded chunks so only the necessary code gets fetched when navigating.
• Preload Critical Lazy Modules: Use Angular’s built-in PreloadAllModules strategy to load important lazy modules in the background right after the app initializes. Add this to your root router config:

  import { PreloadAllModules } from '@angular/router';
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  For more control, create a custom preloader that only preloads modules you know users will frequently access (like a dashboard or settings page).

• Leverage Tree Shaking: Angular 6 uses webpack 4 under the hood, which handles tree shaking automatically in production. But make sure you’re importing only what you need—avoid pulling in entire libraries when you can use individual functions. For example, use import { map } from 'rxjs/operators'; instead of import * as rxjs from 'rxjs';.
• Audit and Optimize Third-Party Libraries:
  • Swap heavy libraries with lighter alternatives where possible (e.g., use date-fns instead of moment.js for date handling).
  • Use webpack-bundle-analyzer to spot large dependencies. Install it with npm install webpack-bundle-analyzer --save-dev, then add it to your angular.json config to visualize your bundle and pinpoint bloat.
• Enable Asset Compression: Configure your server to use gzip or brotli compression for JS/CSS files. Most servers (Nginx, Apache, etc.) support this, and it can reduce download sizes by 60-70%—a huge win for load speed.

• Lazy Load Individual Components: Even inside a lazy module, you can lazy-load non-critical components using Angular’s ComponentFactoryResolver or dynamic loading. This way, you don’t load code for components that aren’t immediately needed when navigating to the module.
• Optimize Change Detection: Use ChangeDetectionStrategy.OnPush for components that don’t need frequent updates. This reduces the number of change detection cycles, making your app more responsive during route transitions.
• Delay Non-Critical Initialization: Don’t load non-essential data or services during app startup. Use APP_INITIALIZER only for critical setup, and fetch other data asynchronously after the first route renders.

• Switch to HTTP/2: If your server supports HTTP/2, it allows multiplexing requests—meaning multiple lazy chunks can be downloaded at the same time instead of sequentially. This drastically speeds up chunk loading during route jumps.
• Cache Lazy Chunks: Set proper cache headers on your server for lazy-loaded JS chunks. Returning users won’t have to re-download the same chunks again, which makes subsequent navigation almost instant.

• Update Angular CLI: Make sure you’re on the latest compatible version of Angular CLI for Angular 6—newer versions often include performance optimizations. Run ng update @angular/cli (just double-check compatibility first to avoid breaking changes).
• Lighten Up Route Guards: Avoid long-running tasks in route guards like CanActivate. Move heavy logic to a service and handle it asynchronously, with a loading spinner if needed, so it doesn’t block navigation.
• Be Strategic with Preloading: Don’t preload every lazy module—reserve preloading for modules users are likely to visit right after the initial load. Leave rarely used modules to load only when needed.

内容的提问来源于stack exchange，提问作者rajhim