mgechev/angular-performance-checklist

Features

• Angular Performance Optimizers - Reducing the amount of data sent to the browser through tree-shaking, minification, and code splitting in Angular projects.
• Web Bundle Reductions - Minifies code and removes dead code and template whitespace to reduce network data transfer.
• Ahead-Of-Time Compilation - Provides guidance on implementing ahead-of-time compilation to reduce runtime overhead and improve tree-shaking.
• Build-Time Precompilation - Transpiles templates into JavaScript during the build process to improve runtime rendering speed.
• Strategies - Limits when a component tree is checked for updates by using a specific change strategy.
• Zone-Based Detection - Explains how to tune zone-based change detection and run logic outside the Angular zone for performance.
• Zone Opt-Outs - Executes logic outside the primary asynchronous zone to prevent triggering global change detection cycles.
• JavaScript Bundle Tree-Shaking - Provides techniques for tree-shaking to remove unused code and services from production bundles.
• Rendering Performance - A manual for improving UI performance using server-side rendering, virtual scrolling, and change detection strategies.
• Dependency Injection Optimizations - Excludes unused services from the final bundle by defining provider scope within the decorator.
• Tree-Shakeable Providers - Configures services to be tree-shakeable to ensure unused services are excluded from the final bundle.
• Framework Change Detection Optimizations - Improves runtime performance by skipping sub-tree checks or running code outside the tracking zone.
• Zone-Based Optimizations - Reducing unnecessary browser re-renders by optimizing how Angular tracks state changes and executes logic outside of zones.
• Route-Based Code Splitting - Divides the application into smaller chunks that load only when specific routes are accessed.
• Application Shells - Provides a blueprint for rendering a minimal UI skeleton immediately upon load to improve perceived performance.
• Virtualized List Rendering - Improves DOM performance using tracking functions and virtual scrolling to limit rendered elements.
• Resource Loading - Loads critical assets early and delays non-essential modules to reduce the initial download size for the user.
• Bundle Optimizers - Reduces transferred data by bundling resources, splitting code, and removing unused code.
• Code Splitting - Bundles code into smaller files and loads them lazily to avoid downloading unused features.
• Lazy Loading - Explains how to implement lazy-loading and module splitting to prevent oversized initial bundles.
• Offline Web Caching - Implements offline caching strategies using service workers to maintain application functionality without a network connection.
• Initial Page Load Optimizations - Combines server-side rendering and application shells to reduce time-to-interactive and improve initial load speed.
• Server-Side Rendering - Offers strategies for server-side rendering to improve SEO and eliminate the initial blank screen.
• Server-Side Renderings - Provides strategies for pre-rendering pages on the server to improve SEO and eliminate the initial blank screen.
• Service Worker Asset Caching - Guides the implementation of service workers to intercept requests and manage offline asset caching.
• Progressive Web Apps - Setting up service workers and caching strategies in Angular to enable offline access and faster repeat visits.
• Template Expression Optimizations - Replaces expensive function calls in templates with pure pipes or cached values for smooth interactions.
• Method Result Caches - Uses pure pipes to cache function return values and avoid redundant processing of template expressions.
• Expression Memoization - Recommends using pure pipes and cached expressions to prevent expensive re-computations during UI updates.
• Expensive Result Caches - Implements result caching via pure pipes to avoid expensive re-computations during digest cycles.
• Item-Specific State Tracking - Identifies unique objects in lists using a tracking function to prevent unnecessary DOM reconstructions.
• Asset Bundling - Optimizes the bundling of application assets into fewer files to reduce the number of HTTP requests.
• Dead Code Elimination - Details how to remove unused functions and modules from the final production bundle to reduce payload size.
• Module Bundling - Uses module bundling to merge multiple source files and dependencies into optimized output files.
• Template Whitespace Control - Decreases bundle size by stripping unnecessary whitespace from templates during the build process.
• Node Count Reductions - Reduces the number of elements rendered in the UI using virtual scrolling to improve speed.
• Web-Worker Threading - Describes moving expensive computational logic into background web workers to maintain a high frame rate.
• Lazy Loading - Describes deferring the loading of specific feature modules until they are requested to reduce the initial bundle size.
• Tree-Shakeable Exports - Provides guidance on structuring service providers to ensure they are excluded from the bundle when not actively used.
• Execution Context Tuning - Guidance on running asynchronous tasks without triggering global change detection to prevent performance degradation.
• Memoization Caches - Describes the use of pure pipes for memoizing template expressions to avoid redundant calculations.
• Asset Prefetching Strategies - Downloads images, styles, or modules in the background to improve the speed of subsequent navigation.
• Resource Prefetching - Loads assets, modules, or data in the background before they are requested to improve speed.
• Memoized Transformation Pipes - Caches the output of transformation pipes based on input values to avoid redundant recalculations.
• DOM Virtualization - Demonstrates how to use virtual scrolling to minimize the number of active DOM elements in large lists.
• List Item Reconciliation - Uses unique keys to identify items in a list to prevent re-rendering the entire tree.
• Virtual Scrolling - Reduces the number of rendered elements using virtual scrolling to speed up browser rendering.
• Code Minifiers - Decreases payload size by removing comments and whitespace and renaming variables to reduce bandwidth.
• Main Thread Offloading - Details how to offload heavy computational logic to web workers to keep the main UI thread responsive.
• Deferred Loading - Provides strategies for delaying the loading of non-critical assets and modules until they are needed.
• Resource Pre-fetching - Downloads assets or data in the background before they are requested to improve user experience.
• Resource Preloading - Loads assets, styles, or modules in the background before they are requested to improve experience.
• Service Worker Caching Strategies - Manages offline access and automates asset caching by using a local proxy to handle requests between the browser and server.
• Template Output Optimization - Removes unnecessary whitespace and unused directives from templates to decrease the bundle size.
• Framework Performance Guides - Comprehensive guide for improving Angular application performance.
• Web Development - Performance optimization guide for Angular applications.

Star history