dynamically - use javascript in angular 2

¿Cómo puedo mejorar el rendimiento de carga de las aplicaciones Angular2?

Question

La aplicación Angular2 se carga lentamente, ¿cómo puedo mejorar el rendimiento en la carga?

Yo uso Angular2, mecanografiado con html5.

Actualmente mi aplicación tarda 4 segundos en cargarse. Soy anfitrión con Firebase y uso cloudflare.

Cosas que estoy haciendo / información:

• He comprimido imágenes.
• Minimizo css
• Yo minifico js.
• Yo uso async en mis scripts.
• Mis guiones están en mi.
• Los guiones rondan los 700kb
• Utilicé la prueba de velocidad de google y obtuve un 65%
• Usé una versión reducida de las librerías que uso, por ejemplo, bootstrap, etc.
• Usando systemjs.
• Esta es la aplicación semilla que estoy usando: https://github.com/mgechev/angular-seed

Fluir:

Cuando la aplicación se carga, muestra una pantalla azul (este es el bootstrap css) y luego, 4 segundos después, la aplicación se carga y funciona muy rápido. Pero tarda 4 segundos en cargarse. Parece que el archivo app.js que systemjs minimiza está ralentizando toda la aplicación y no muestra las vistas lo suficientemente rápido.

Esta es la prueba de velocidad de mi sitio web: https://www.webpagetest.org/result/161206_F5_N87/

Este es mi sitio web:

https://thepoolcover.co.uk/

Avíseme si necesita más información sobre mi aplicación y cualquier otra cosa que pueda hacer.

Answer 1

¿Qué hay de "división de código".

Desde el sitio webpack:

"Para las grandes aplicaciones web no es eficiente poner todo el código en un solo archivo, especialmente si algunos bloques de código solo son necesarios en algunas circunstancias. Webpack tiene una función para dividir su base de código en" fragmentos "que se cargan a pedido. Otros los paquetes los llaman "capas", "rollups" o "fragmentos". Esta característica se denomina "división de código".

Enlace aquí:

https://webpack.github.io/docs/code-splitting.html

Tenga en cuenta que la CLI angular utiliza Webpack.

Además, asegúrese de que si su aplicación arranca con llamadas de datos, no está retrasando la representación de sus componentes esperando que esas llamadas regresen. Promesas, asíncronas, etc.

Answer 2

Es difícil diagnosticar el problema preciso que está teniendo sin tener en cuenta toda su base de código y backend (como otros han sugerido, el problema puede no ser angular en absoluto).

Dicho esto, te recomiendo que comiences a usar el angular-cli . Fue diseñado por el equipo angular para lograr todas las cosas que necesita hacer en una interfaz de línea de comandos fácil de usar. Entonces mi respuesta se basa en el uso del angular-cli.

Estas son las cosas generales que puede hacer para optimizar su proyecto ng2 para producción:

1) Compilación anticipada (AoT): agrupación / minificación / sacudida de árboles

Mira, olvídate del dolor de cabeza de configurar un montón de tareas para lograr todas estas cosas. El angular-cli maneja la compilación Bundling / Minification / Tree-shaking / AOT en un solo paso:

ng build -prod -aot

Esto producirá los siguientes archivos js en su carpeta "dist":

inline.d41d8cd98f00b204e980.bundle.js
vendor.d41d8cd98f00b204e980.bundle.js
main.d41d8cd98f00b204e980.bundle.js
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

También obtendrá las versiones comprimidas de estos archivos para MÁS optimización:

inline.d41d8cd98f00b204e980.bundle.js.gz
vendor.d41d8cd98f00b204e980.bundle.js.gz
main.d41d8cd98f00b204e980.bundle.js.gz

La compilación AOT de Angular automáticamente "sacudirá el árbol" en su código y eliminará cualquier referencia no utilizada. Por ejemplo, puede usar lodash en su proyecto, pero probablemente solo use algunas funciones de lodash; la sacudida del árbol eliminará todas las partes no utilizadas de lodash que no son necesarias en su construcción final. Y lo más importante, la compilación AOT precompilará todo su código y vistas, lo que significa MENOS tiempo que el navegador necesita para poner en marcha la aplicación ng2. this para obtener más información sobre la compilación AOT de angular.

2) Carga diferida de partes de su aplicación Si divide aún más su aplicación en diferentes partes, no necesita cargar TODO cuando su aplicación se carga por primera vez. Puede especificar diferentes módulos para su aplicación que luego se pueden agrupar (mediante el compilador angular-cli aot) en diferentes fragmentos. Lea angular.io/docs/ts/latest/guide/ngmodule.html para aprender cómo organizar su proyecto en módulos que puede compilar en portabrocas que solo se cargan según sea necesario. Angular-cli gestionará la creación de estos fragmentos por ti.

3) Angular Universal Ahora, si realmente desea que su tiempo de carga sea EXTREMADAMENTE rápido, entonces deberá considerar implementar Angular Universal , que es cuando compila su vista inicial EN EL SERVIDOR. No he usado Angular Universal ya que he podido lograr tiempos de carga rápidos con los pasos 1 y 2. Pero es una opción emocionante en el conjunto de herramientas ng2. Tenga en cuenta que no compila ni ejecuta la aplicación ng2 en el servidor, compila la vista inicial del lado del servidor para que el usuario reciba rápidamente una sacudida de html y, por lo tanto, el usuario PERCIBE que el tiempo de carga sea muy rápido (aunque una carga completa aún se retrasará un poco). Este paso no elimina la necesidad de los otros pasos. Como beneficio adicional, se supone que Angular Universal también ayuda con el SEO.

4) agrupación secundaria

Si no estoy usando la carga diferida, generalmente sigo adelante y empaqueto más los archivos de distribución que se generan a partir de la compilación AOT. Por lo tanto, creo un archivo main.bundle.js que concatena los archivos inline.js, vendor.js y main.js. Yo uso trago para esto.

Answer 3

Intente deshabilitar los mapas de origen ejecutando ng serve --sourcemap=false

Answer 4

Una aplicación de una sola página generalmente lleva más tiempo mientras se carga, ya que carga todas las cosas necesarias a la vez.

También me enfrenté al mismo problema y mi equipo ha optimizado nuestro proyecto de cargar en 8 segundos a 2 segundos utilizando los siguientes métodos.

1. Carga diferida de un módulo: los módulos de carga diferida ayudan a disminuir el tiempo de inicio. Con la carga diferida, nuestra aplicación no necesita cargar todo de una vez, solo necesita cargar lo que el usuario espera ver cuando la aplicación se carga por primera vez. Los módulos que se cargan perezosamente solo se cargarán cuando el usuario navegue por sus rutas. Angular2 ha introducido módulos en su versión final RC5. Vea a continuación la guía paso a paso.

2. Aot Compilation: con AoT, el navegador descarga una versión precompilada de la aplicación. El navegador carga el código ejecutable para que pueda procesar la aplicación de inmediato, sin esperar a compilar la aplicación primero.

   Reduce el tamaño de la carga útil: no es necesario descargar el compilador angular si la aplicación ya está compilada. El compilador es aproximadamente la mitad de Angular, por lo que omitirlo reduce drásticamente la carga útil de la aplicación. Para más información mira this .

3. Webpack: Webpack es un paquete de módulos popular, una herramienta para agrupar el código fuente de la aplicación en trozos convenientes y para cargar ese código desde un servidor a un navegador. Puede configurar su aplicación web Angular 2 con webpack (consulte esta guía ).

4. Eliminar guiones, hoja de estilo de index.html: elimine todos los guiones y hoja de estilo que no son necesarios en index.html. Puede cargar estos scripts dinámicamente en el componente mismo llamando a un servicio.

   Cree un archivo script.service.ts que pueda cargar cualquier script a pedido para ese componente

/ script.service.ts

import { Injectable } from ''@angular/core'';
declare var document: any;

@Injectable()
export class Script {

  loadScript(path: string) {
    //load script
    return new Promise((resolve, reject) => {
      let script = document.createElement(''script'');
      script.type = ''text/javascript'';
      script.src = path;
      if (script.readyState) {  //IE
        script.onreadystatechange = () => {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve({ loaded: true, status: ''Loaded'' });
          }
        };
      } else {  //Others
          script.onload = () => {
            resolve({ loaded: true, status: ''Loaded'' });
          };
      };
      script.onerror = (error: any) => resolve({ loaded: false, status: ''Loaded'' });
      document.getElementsByTagName(''head'')[0].appendChild(script);
    });
  }
}

Este es solo un código de muestra para cargar el script dinámicamente, puede personalizarlo y optimizarlo usted mismo según sus necesidades. Para la hoja de estilo, debe cargarla en el componente usando styleUrl.

5. Use el almacenamiento en caché del navegador: los archivos de su página web se almacenarán en la memoria caché del navegador cuando use el almacenamiento en caché del navegador. Sus páginas se cargarán mucho más rápido para los visitantes habituales, al igual que otras páginas que comparten esos mismos recursos. Para más información https://varvy.com/pagespeed/leverage-browser-caching.html

6. minimice el código en app.component.ts: minimice el código presente en app.component.ts que siempre se ejecuta cuando la aplicación se carga o recarga.

7. establecer datos en la inicialización de la aplicación: si está utilizando las mismas llamadas de API varias veces en su proyecto o en componentes, o si depende de los mismos datos en varios componentes, en lugar de llamar a API varias veces, lo que puede hacer es guardar los datos como un objeto en servicio en la inicialización de la aplicación. Ese servicio actuará como un singleton durante todo el proyecto y puede acceder a esos datos sin llamar a la API.

Carga lenta de módulos paso a paso

1. Estructura modular: tenemos que dividir nuestra aplicación en módulos separados. Por ejemplo, una aplicación puede tener un lado de usuario y un lado de administrador y cada uno tendrá sus propios componentes y rutas diferentes, por lo que separaremos estos dos lados en módulos admin.module.ts y user.module.ts.

2. Módulo raíz: cada aplicación angular tiene una clase de módulo raíz. Por convención, es una clase llamada AppModule en un archivo llamado app.module.ts, este módulo importará los dos módulos anteriores y también el AppComponent para bootstrap. También puede declarar múltiples componentes según sus necesidades. Código de muestra en app.module.ts:

/ app.module.ts

import { NgModule } from ''@angular/core'';
import { UserModule } from ''./user/user.module'';
import { AdminModule } from ''./admin/admin.module'';
import { AppComponent } from ''./app.component'';
import { LoginComponent } from ''./login.component'';

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

3. Rutas: ahora en sus rutas puede especificar como lo siguiente

/ app.router.ts

import { ModuleWithProviders } from ''@angular/core'';
import { Routes, RouterModule } from ''@angular/router'';
import { LoginComponent } from ''./login.component'';

const routes: Routes = [
  { path: ''login'', component: ''LoginComponent'' }, //eager loaded
  { path: ''admin'', loadChildren: ''./admin/admin.module#AdminModule'' }, // Lazy loaded module
  { path: ''user'', loadChildren: ''./user/user.module#UserModule'' }  //lazy loaded module
];

Ahora, cuando se carga la aplicación, solo cargará el código LoginComponent y AppComponent. Estos módulos solo se cargarán cuando visitemos las rutas / admin o / user. Por lo tanto, disminuirá el tamaño de la carga útil para cargar en el navegador, lo que dará como resultado una carga rápida.

4. Módulos de anidamiento: al igual que app.module, cada módulo tiene su propio conjunto de componentes y rutas. A medida que su proyecto se hace más grande, la anidación de los módulos dentro del módulo es la mejor manera de optimizar porque podemos cargar esos módulos de forma perezosa cuando lo necesitemos.

TENGA EN CUENTA

El código anterior es solo para explicación, consulte el ejemplo completo https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Answer 5

porque su SPA y angular 2 inician demasiado lento. Eso es. además de RXjs, toneladas de polifills, etc. AOT puede ayudar, pero muchas libs angular2 no funcionan con él. angular universal realmente ayuda