Improving Performance of Angular Applications

Summary

Marketing Portal

Lazy Loaded Modules

Packages Removal

Interface

Compiler

just-in-time

ahead-of-time

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

AngularCompiler

+

@ngtools/webpack

dynamic data on route

Dynamic Components

Dynamic Templates

+

JIT

AOT

First Meaningful Paint

Approach FMP %
JIT 8.37s 100%
AOT 5.15s 62%

webpack-bundle-analyzer

moment.js

moment.js

web-animations.js

web-animations.js

clarity-angular

clarity-angular

Result

Bundle Size

Before After %
3.79 MB 2.78 MB 26%

Lazy Loading

Roteamento Assícrono

Architecture - Overview

Modules

Declarations

Bootstrap

Providers

Imports

Exports

@NgModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

SharedModule

CommonModule

Declarations

Exports

CoreModule

Providers

 

Features Modules

Type Exports Example
Domain Top Components -
Routed no Lazy Loadeds
Routing RouterModule Routes Config.
Service no CoreModule
Widget yes Shared

Cat App

KittyPageComponent

/kitty

/kitty/register

<h1>Kitty Page</h1>

<router-outlet name="content"></router-outlet>
{
  path: 'kitty',
  loadChildren: './kitty/kitty.module#KittyModule'
},
{
  path: '',
  component: KittyPageComponent,
  children:
  [
    {
      path: 'register',
      children: [
        { path: '', component: RegisterKittyComponent, outlet: 'subpage'},
      ]
    },
    { path: '', component: KittyComponent, outlet: 'subpage' }
  ]
}

AppRoutingModule

KittyModule

First Meaningful Paint

Approach FMP %
JIT 8.37s 100%
AOT 5.15s 62%
AOT + Lazy Loading 4.308s 52% (JIT)
84% (AOT)

Conclusion

Improving Performance of Angular Applications

By Keilla Fernandes

Improving Performance of Angular Applications

  • 258
Loading comments...

More from Keilla Fernandes