Implementing Lazy Loading Strategies in Angular for Improved Performance

Techniques for applying lazy loading to reduce initial load times and enhance the performance of Angular applications.

0 likes
9 views

Rule Content

{
  "title": "Implementing Lazy Loading Strategies in Angular for Improved Performance",
  "description": "Techniques for applying lazy loading to reduce initial load times and enhance the performance of Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-lazy-loading-feature-modules",
      "description": "Organize your application into feature modules and configure them for lazy loading to improve performance.",
      "severity": "warning",
      "pattern": {
        "regex": "import\\s*\\(\\s*['\"]\\.\\/.*\\.module['\"]\\s*\\)\\.then\\(m\\s*=>\\s*m\\..*Module\\)",
        "flags": "g"
      },
      "message": "Consider organizing your application into feature modules and configuring them for lazy loading to enhance performance."
    },
    {
      "id": "angular-lazy-loading-shared-modules",
      "description": "Ensure shared modules are not imported into lazy-loaded modules to prevent unnecessary bundle size increase.",
      "severity": "error",
      "pattern": {
        "regex": "import\\s*{\\s*.*\\s*}\\s*from\\s*['\"].*shared.*['\"]",
        "flags": "g"
      },
      "message": "Avoid importing shared modules into lazy-loaded modules to prevent unnecessary bundle size increase."
    },
    {
      "id": "angular-lazy-loading-preloading-strategy",
      "description": "Implement a preloading strategy to load certain lazy-loaded modules in the background, improving user experience.",
      "severity": "info",
      "pattern": {
        "regex": "preloadingStrategy:\\s*PreloadAllModules",
        "flags": "g"
      },
      "message": "Consider implementing a preloading strategy to load certain lazy-loaded modules in the background, enhancing user experience."
    },
    {
      "id": "angular-lazy-loading-guards",
      "description": "Implement route guards for lazy-loaded routes to manage access and enhance security.",
      "severity": "warning",
      "pattern": {
        "regex": "canActivate:\\s*\\[.*\\]",
        "flags": "g"
      },
      "message": "Implement route guards for lazy-loaded routes to manage access and enhance security."
    },
    {
      "id": "angular-lazy-loading-avoid-overloading",
      "description": "Avoid overusing lazy loading; assess which modules truly benefit from being lazy-loaded.",
      "severity": "info",
      "pattern": {
        "regex": "loadChildren:\\s*\\(\\)\\s*=>\\s*import\\(.*\\)\\.then\\(m\\s*=>\\s*m\\..*Module\\)",
        "flags": "g"
      },
      "message": "Evaluate whether the module truly benefits from lazy loading to avoid unnecessary complexity."
    }
  ]
}