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