Improving Performance of Angular Applications

Summary

VMWare Cloud Portal

Interface

Arquitetura - Overview

Módulos

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

CoreModule

Módulos de Funcionalidades

Roteamento Assícrono

Cat App

<h1>Kitty Page</h1>

<router-outlet name="content"></router-outlet>

{
  path: 'kitty',
  loadChildren: './kitty/kitty.module#KittyModule'
},

AppRoutingModule

Compilador

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);

JIT

AOT

AOT

+

Lazy Loading

Primeira Pintura Significativa

Obrigada :)))

slides.com/keilla/angular-performance

"I like to learn.That's an art and a science."

Katherine Johnson