Curso de Rendimiento en Angular - Yessica54/carrera-front-end GitHub Wiki

• Bundle size: cuanto pesa en bytes la aplicacion
• Lazy loading: fragmentar la aplicacion para cargarlas de a partes
• Tree Shaking: eliminar el codigo que no se utiliza. eliminar codigo que no se utilice tanto con nuestro codigo y las librerias que utilicemos.

Se debe instalar la siguiente dependencia npm i webpack-bundle-analyzer --save-dev luego se debe generar una version de produccion con el comando ng build --prod --stats-json se debe verificar que quede el archivo stast-es2015.json se halla generado en la carpeta dist. se ejecuta el comando npx webpack-bundle-analyzer dist/aplication/stast-es2015.json para realizar el análisis, la ejecución nos indicara un puerto en donde podemos ver el análisis

Con bundlephobia.com podemos comparar librerias y utilizar las más convenientes para el peso de nuestro app con lo consiguiente reduciendo el tiempo de carga de la misma.

Performance Budget es una herramienta para colocar minimos de costo para nuestras aplicaciones. angular.json permite configurar el peso maximo de nuestros paquetes De igual manera no hace falta normalmente configurarlo ya que angular lo hace por nosotros budgets. Se puede ir al link perf-budget-calculator para visualizar el calculo del los archivos y te indica el tiempo de carga.

**PreLoadAllModules **: es una estrategia de carga el cual consiste en cargar todos los módulos de nuestra aplicación cuando el browser haya terminado de cargar nuestra pantalla inicial

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})

la consecuencia ocurre si nuestra aplicación es grande al tener muchos módulos esta estrategia es ineficiente ya que estamos cargando demasiados datos 

Para implementar una propia forma de precarga para eso se puedo agregar una bandera de esta forma:

...
  {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
        data: { preload: true }
      },
...

Se crea un servicio en manejar la precarga

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PreloadService implements PreloadingStrategy {

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      return load();
    } else {
      return of();
    }
  }
}```

Para luego agregar en `app-routing.module.js`

```JS
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadService
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

QuicklinkStrategy detecta los link que estan en el viewport y precarga esos modulos utiliza IntersectionObserver para llevar a cabo su tarea. para eso es necesario instalar el siguiente componente

npm install gnx-quicklink --save

Importarlo en app.module y shared.module

// app.module.ts y tambien en shared.module.ts
import { QuicklinkStrategy } from 'ngx-quicklink'

@NgModule({
    ...
    imports: [
        ...
        QuicklinkModule
    ]
})

Implementar la estrategia en el app-routing

// app-routing.module.ts 
import { QuicklinkStrategy } from 'ngx-quicklink'

...
@NgModule({
    imports: [RouterModule.forRoot(routes, {
        enableTRacing: false,
        preloadingStrategy: QuicklinkStrategy,
        paramsInheritanceStrategy: 'always'
    })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Las cadenas de Markov permiten visualizar cada una de las probabilidades que se tienen en la navegación de la aplicación. Evalúa la probabilidad que tiene cada una de las vistas de la aplicación frente a un comportamiento previo de los usuarios, generando un modelo de predicción de precarga de módulos, con el fin de mejorar el rendimiento y la experiencia de usuario mientras navega por la aplicación web desarrollada. Se puede utilizar la libreria Guess que utiliza datos de google analitys

Nos dan un script que debemos colocar en el archivo index.html Es importante fijarse en la documentación para estos datos ya que van cambiando en el tiempo. dado que angular es una aplicacion de un pagina es necesario agregar una configuración en el app.module.ts para que cuando se cambio de ruta envíe la información necesaria a google, la configuración es la siguiente:

...
import {Route, NavegationEnd} from '@angular/route'
import {filter} from 'rxjs/operators'

declare var gtap;

...

export class AppComponet{

   constructor(private route: Route){
      const navEvent$ = this.route.events
      .pipe(
         filter(event => event instanceof NavegationEnd)
       );

       navEvent$.subscribe((event: NavegationEnd)  => {
          gtag('config', 'UA-323231-1',{
             page_path: event.urlAftenRedirects
          })
       })
      
   }
}

Esto sirve para cachear los archivos estaticos con los Services workers, para agregar Services workers a tu proyecto de angular se correo el comando ng add @angular/pwa --project *project-name* los pasos a seguir los puedes encontrar en a la Documentación de Oficial de Angular

Esto nos ayuda en el SEO, en el performance ya que el renderizador se hace desde el back no al cliente haciendo lo mas rápido la carga

Para iniciar un SSR es necesario ejecutar el siguiente comando ng add @nguniversal/express-engine --clientProject [your project name] la implementación de se revisa la Documentación Oficial de Angular. De igual forma hay que tener cuidado cuando se utilizan las siguientes variables window, document, navigator, or location ya que las aplicaciones desde lado del servidor no pueden hacer refencia a variables del navegador