Can it help me identify which libraries are making my app slow?

Yes, it provides commands and interpretation guides for bundle analysis tools that pinpoint exactly which node_modules are consuming the most space.

Does this skill work with standalone components?

Yes, it includes specific patterns for lazy loading standalone components and optimizing imports in modern Angular architectures.

How does it handle image optimization?

It provides strategies for using modern formats like WebP, responsive image sets (srcset), and native browser lazy loading to reduce asset payload.

What is the primary benefit of the Angular Bundle Optimization skill?

The skill helps reduce the initial download size of your application, leading to faster Time to Interactive (TTI) and improved search engine rankings through better Core Web Vitals.

Is this applicable for legacy Angular versions?

While it focuses on modern best practices like AOT and Ivy, many of the strategies for library replacement and lazy loading are applicable to older versions of Angular (v2+).

Angular Bundle Optimizer

Name: Angular Bundle Optimizer
Author: EhssanAtassi

byEhssanAtassi

0•

部署与 DevOps

Optimizes Angular applications by reducing bundle sizes through advanced tree shaking, lazy loading, and production build configurations.

The Angular Bundle Optimizer skill empowers Claude to significantly improve web application performance by implementing modern optimization patterns. It provides actionable guidance for bundle analysis using tools like Webpack Bundle Analyzer, implementing efficient route-based and component-level lazy loading, and performing aggressive tree shaking. By auditing third-party libraries and fine-tuning angular.json configurations, this skill helps developers achieve faster initial load times and better Core Web Vitals, making it indispensable for maintaining high-performance enterprise Angular applications.

主要功能

01Bundle analysis integration using Webpack Bundle Analyzer and Source Map Explorer

020 GitHub stars

03Implementation patterns for route-based, component-based, and interaction-driven lazy loading

04Tree shaking optimization for services, Material components, and third-party libraries

05Production build configuration including AOT compilation and performance budgets

06Dependency auditing to replace heavy libraries with modern, lightweight alternatives

使用场景

01Identifying and removing unused code and bloated dependencies during a performance audit

02Refactoring a large monolithic Angular application into optimized, lazy-loaded feature modules

03Setting up performance budgets in CI/CD to prevent bundle size regressions over time

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ehssanatassi/angular-marketplace-developer bundle-optimization

For use in Claude.ai and ChatGPT

主要功能

01Bundle analysis integration using Webpack Bundle Analyzer and Source Map Explorer

020 GitHub stars

03Implementation patterns for route-based, component-based, and interaction-driven lazy loading

04Tree shaking optimization for services, Material components, and third-party libraries

05Production build configuration including AOT compilation and performance budgets

06Dependency auditing to replace heavy libraries with modern, lightweight alternatives

使用场景

01Identifying and removing unused code and bloated dependencies during a performance audit

02Refactoring a large monolithic Angular application into optimized, lazy-loaded feature modules

03Setting up performance budgets in CI/CD to prevent bundle size regressions over time