Optimizing Angular Loading Time with Preloading Strategies

{
  "title": "Optimizing Angular Loading Time with Preloading Strategies",
  "description": "Explore methods to optimize your application’s loading time through effective lazy loading and preloading strategies.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-preloading-strategy",
      "name": "Implement Preloading Strategies for Lazy-Loaded Modules",
      "description": "Enhance application performance by configuring appropriate preloading strategies for lazy-loaded modules.",
      "severity": "warning",
      "applyTo": ["module"],
      "when": {
        "allOf": [
          {
            "exists": "RouterModule.forRoot"
          },
          {
            "not": {
              "exists": "preloadingStrategy"
            }
          }
        ]
      },
      "then": {
        "suggest": [
          {
            "message": "Consider setting a preloading strategy to improve navigation speed. For example, use PreloadAllModules for smaller applications or implement a custom strategy for larger ones.",
            "code": "RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })"
          }
        ]
      }
    },
    {
      "id": "angular-quicklink-preloading",
      "name": "Use Quicklink Strategy for Efficient Preloading",
      "description": "Utilize the Quicklink preloading strategy to preload only the routes associated with links currently visible on the page.",
      "severity": "info",
      "applyTo": ["module"],
      "when": {
        "allOf": [
          {
            "exists": "RouterModule.forRoot"
          },
          {
            "not": {
              "exists": "QuicklinkStrategy"
            }
          }
        ]
      },
      "then": {
        "suggest": [
          {
            "message": "To optimize loading, consider using the Quicklink preloading strategy. Install ngx-quicklink and configure your router accordingly.",
            "code": "import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink';\n\n@NgModule({\n  imports: [\n    QuicklinkModule,\n    RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })\n  ]\n})\nexport class AppModule {}"
          }
        ]
      }
    },
    {
      "id": "angular-custom-preloading-strategy",
      "name": "Implement Custom Preloading Strategy",
      "description": "Define a custom preloading strategy to selectively preload modules based on specific criteria.",
      "severity": "info",
      "applyTo": ["module"],
      "when": {
        "allOf": [
          {
            "exists": "RouterModule.forRoot"
          },
          {
            "not": {
              "exists": "CustomPreloadingStrategy"
            }
          }
        ]
      },
      "then": {
        "suggest": [
          {
            "message": "For more control over module preloading, implement a custom preloading strategy by creating a class that implements the PreloadingStrategy interface.",
            "code": "import { PreloadingStrategy, Route } from '@angular/router';\nimport { Observable, of } from 'rxjs';\n\nexport class CustomPreloadingStrategy implements PreloadingStrategy {\n  preload(route: Route, load: () => Observable<any>): Observable<any> {\n    return route.data && route.data['preload'] ? load() : of(null);\n  }\n}"
          }
        ]
      }
    }
  ]
}