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

webpack-bundle-analyzer

moment.js

moment.js

web-animations.js

web-animations.js

clarity-angular

clarity-angular

Result

Bundle Size

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

Cat App

<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

Conclusion