{"id":686,"date":"2025-04-30T06:58:28","date_gmt":"2025-04-30T06:58:28","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=686"},"modified":"2026-02-05T12:06:47","modified_gmt":"2026-02-05T12:06:47","slug":"how-to-improve-angular-app-performance","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/how-to-improve-angular-app-performance\/","title":{"rendered":"How to Improve Angular App Performance?"},"content":{"rendered":"\n<p>There are multiple ways we can optimize performance of an Angular application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Ahead-of-Time (AOT) Compilation<\/h2>\n\n\n\n<p>Angular uses Just-In-Time compilation for development, but you should use AOT compilation for production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<p>Convert Angular HTML and TypeScript code into JS code making use of AOT compilation. This provides faster rendering and improved performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How?<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>ng build --configuration production<\/code><\/pre>\n\n\n\n<p>This enables AOT, minification, and other optimizations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lazy Loading Modules<\/h2>\n\n\n\n<p>Instead of loading all modules at once, load them on demand using Angular&#8217;s Router.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<p>Improve faster load times by reducing the initial bundle size:<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const routes: Routes = &#91;\n  { \n     path: '', \n     <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">component<\/mark>: HomeComponent \n  },\n  {\n    path: 'admin',\n    loadChildren: () =>\n      import('.\/admin\/admin.module').then((m) => m.AdminModule),\n  },\n];<\/code><\/pre>\n\n\n\n<p>Now, AdminModule is only loaded when the user navigates to \/admin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tree Shaking and Removing Unused Code<\/h2>\n\n\n\n<p>Ensure that unused services, modules, or third-party libraries are not bundled into your production build.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Smaller bundles = faster downloads + parsing + rendering.<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How?<\/h3>\n\n\n\n<p>Use the <em>&#8211;configuration production<\/em> flag.<\/p>\n\n\n\n<p>Avoid using <em>barrel files<\/em> that re-export everything (<em>index.ts<\/em>) blindly.<\/p>\n\n\n\n<p>Import only the functions you need from large libraries (e.g., <em>lodash-es<\/em> instead of lodash).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change Detection Strategy<\/h2>\n\n\n\n<p>Implement <em>ChangeDetectionStrategy.OnPush<\/em> using component switching without relying on external state.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<p>By default, Angular checks every component in the tree on every change. <em>OnPush<\/em> limits checks to components whose inputs have changed.<\/p>\n\n\n\n<p><strong>Example<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Component({\nselector: 'app-optimized',\ntemplateUrl: '.\/optimized.component.html',\nchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OptimizedComponent {\n@Input() data: any;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Use TrackBy with ngFor<\/h2>\n\n\n\n<p>When rendering lists, Angular re-renders items unless you help it identify which items changed using trackBy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<p>Prevents unnecessary DOM manipulations.<\/p>\n\n\n\n<p><strong>Example<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div *ngFor=\"let user of users; trackBy: trackById\">\n  {{ user.name }}\n&lt;\/div>\n\ntrackById(index: number, user: User): number {\n  return user.id;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Optimize Third-Party Libraries<\/h2>\n\n\n\n<p>Use smaller, tree-shakable versions of libraries.<br>Avoid full imports.<\/p>\n\n\n\n<p><strong>Bad<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import * as _ from 'lodash';<\/code><\/pre>\n\n\n\n<p><strong>Good<\/strong>:<\/p>\n\n\n\n<p>import debounce from &#8216;lodash-es\/debounce&#8217;; or switch to native equivalents where possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bundle Optimization<\/h2>\n\n\n\n<p>Make use of Angular CLI command source-map-explorer or webpack-bundle-analyzer to analyze bundle size.<\/p>\n\n\n\n<p><strong>Install:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g source-map-explorer<\/code><\/pre>\n\n\n\n<p><strong>Analyze<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng build --configuration production\nnpx source-map-explorer dist\/&#91;your-app-name]\/*.js<\/code><\/pre>\n\n\n\n<p>Identify and optimize libraries or codebases for optimization or lazy-loading implementation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code Splitting<\/h2>\n\n\n\n<p>Break down monolithic Angular codebase into multiple smaller bundles.<br>Best Practices in Angular code splitting:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use lazy loading as shown earlier<\/li>\n\n\n\n<li>Dynamically import features<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Avoid Memory Leaks<\/h2>\n\n\n\n<p>Unsubscribe from Observables, especially in ngOnDestroy, or use takeUntil and AsyncPipe.<\/p>\n\n\n\n<p>Example with AsyncPipe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div *ngIf=\"data$ | async as data\"&gt;{{ data }}&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>Example with takeUntil:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private destroy$ = new Subject();\nthis.myService.getData()\n.pipe(takeUntil(this.destroy$))\n.subscribe();\nngOnDestroy() {\nthis.destroy$.next();this.destroy$.complete();}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are multiple ways we can optimize performance of an Angular application. Use Ahead-of-Time (AOT) Compilation Angular uses Just-In-Time compilation for development, but you should use AOT compilation for production. Why? Convert Angular HTML and TypeScript code into JS code making use of AOT compilation. This provides faster rendering and improved performance. How? This enables [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=686"}],"version-history":[{"count":49,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/686\/revisions"}],"predecessor-version":[{"id":889,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/686\/revisions\/889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/949"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}