Melhorando a Performance de Aplicações Angular

Bacharel em Ciência da Computação
Codando desde 2008

Desenvolvedora Front-end
Aplicações Angular (fev/2017)

Interface

Arquitetura - Overview

Módulos

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

Módulos de Funcionalidades

Tipo	Exports	Exemplo
Domain	Componentes Topos	-
Routed	não	Lazy Loadeds
Routing	RouterModule	Rotas
Service	não	CoreModule
Widget	sim	Shared

Lazy Loading

Roteamento Assícrono

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

Compilador

ahead-of-time

Webpack Plugin

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

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

Tree Shaking

Rollup