Nuestro grupo de expertos pasados ciertos días de trabajo y recopilación de de datos, encontramos la respuesta, deseamos que te sea útil para tu proyecto.
Solución:
Una aplicación de una sola página generalmente toma 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 para que no se cargue en 8 segundos a 2 segundos mediante el uso de los siguientes métodos.
-
Carga diferida de un módulo: Los módulos de carga diferida ayudan a reducir el tiempo de inicio. Con la carga diferida, nuestra aplicación no necesita cargar todo a la 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 de forma diferida solo se cargarán cuando el usuario navegue a sus rutas. Angular2 ha introducido módulos en su versión final RC5. Consulte a continuación la guía paso a paso.
-
Compilación de Aot: Con AoT, el navegador descarga una versión precompilada de la aplicación. El navegador carga código ejecutable para que pueda procesar la aplicación inmediatamente, 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 obtener más información, consulte esto.
-
Paquete web: Webpack es un popular paquete de módulos, una herramienta para agrupar el código fuente de la aplicación en fragmentos 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).
-
Eliminar scripts, hoja de estilo de index.html: Elimine todos los scripts y hojas de estilo que no sean necesarios en index.html. Puede cargar estos scripts dinámicamente en el propio componente llamando a un servicio.
Cree un archivo script.service.ts que pueda cargar cualquier script bajo demanda 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" ;
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.
-
Utilice el almacenamiento en caché del navegador: Los archivos de su página web se almacenarán en el caché del navegador cuando utilice el almacenamiento en caché del navegador. Sus páginas se cargarán mucho más rápido para los visitantes habituales y también lo harán otras páginas que comparten esos mismos recursos. Para más información https://varvy.com/pagespeed/leverage-browser-caching.html
-
minimizar 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 se vuelve a cargar.
-
establecer datos en la inicialización de la aplicación: Si está utilizando las mismas llamadas a la API varias veces en su proyecto o en componentes, o si depende de los mismos datos en varios componentes, en lugar de llamar a la 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 singleton durante todo el proyecto y puede acceder a esos datos sin llamar a api.
Carga diferida de módulos paso a paso
-
Estructura modular: Tenemos que dividir nuestra aplicación en módulos separados. Por ejemplo, una aplicación puede tener un lado del usuario y un lado del administrador y cada uno tendrá sus propios componentes y rutas diferentes, por lo que separaremos estos dos lados en los módulos admin.module.ts y user.module.ts.
-
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 varios componentes según su necesidad. 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
- Rutas: Ahora en tus rutas puedes especificar como el 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 cargue la aplicación, solo cargará el código de 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.
- 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, el anidamiento de módulos dentro del módulo es la mejor manera de optimizar porque podemos cargar esos módulos de manera perezosa cuando lo necesitemos.
TENGA EN CUENTA
El código anterior es solo para una explicación, consulte el ejemplo completo https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html
¿Qué tal “división de código”?
Desde el sitio Webpack:
“Para las aplicaciones web grandes no es eficiente poner todo el código en un solo archivo, especialmente si algunos bloques de código solo se requieren en algunas circunstancias. Webpack tiene una función para dividir su base de código en” fragmentos “que se cargan a pedido. Algunos otros los agrupadores los llaman “capas”, “acumulaciones” o “fragmentos”. Esta función se denomina “división de código”.
Enlace aquí:
https://webpack.github.io/docs/code-splitting.html
Tenga en cuenta que Angular CLI usa 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 regresen esas llamadas. Promesas, asincrónicas, etc.
Es difícil diagnosticar el problema exacto que está teniendo sin la práctica de todo su código base y backend (como han sugerido otros, es posible que el problema no sea angular en absoluto).
Habiendo dicho eso, te recomiendo encarecidamente 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 de angular-cli.
Estas son las cosas generales que puede hacer para optimizar su proyecto ng2 para la producción:
1) Compilación Ahead of Time (AoT) – Agrupación / Minificación / Sacudida de árboles
Mira, olvídate del dolor de cabeza de configurar un montón de tareas gulp 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.cssTambién obtendrá las versiones comprimidas con gzip 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 hará automáticamente “sacudidas de á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 lodash; la sacudida de los árboles recortará 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. Haga clic aquí 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 es necesario que cargue TODO cuando su aplicación se carga por primera vez. Puede especificar diferentes módulos para su aplicación que luego se pueden agrupar (por el compilador angular-cli aot) en diferentes partes. Lea aquí para aprender cómo organizar su proyecto en módulos que puede compilar en mandriles que solo se cargan SEGÚN SE NECESITA. Angular-cli gestionará la creación de estos fragmentos por usted.
3) Universal angular
Ahora, si realmente desea que su tiempo de carga sea EXTREMADAMENTE rápido, entonces querrá 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 interesante 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 en el 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 es muy rápido (aunque una carga completa todavía se retrasará un poco). Este paso no evita 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 agrupo los archivos de distribución que se generan a partir de la compilación AOT. Así creo uno main.bundle.js archivo que contiene archivos inline.js, vendor.js y main.js. Uso gulp para esto.
Valoraciones y comentarios
Si crees que te ha resultado de utilidad nuestro post, sería de mucha ayuda si lo compartieras con el resto seniors así nos ayudas a extender nuestro contenido.