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
179 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."
}
]
}