Comment puis-je améliorer les performances de charge des applications Angular2?
L'application Angular2 se charge lentement, comment puis-je améliorer les performances en charge?
J'utilise Angular2, TypeScript avec HTML5.
actuellement, mon application prend 4 secondes à charger. J'héberge avec Firebase et utilise cloudflare.
Ce que je fais/info:
- J'ai compressé des images.
- Je minify css
- Je minify js.
- J'utilise async sur mes scripts.
- Mes scripts sont dans mon.
- Les scripts sont autour de 700kb
- J'ai utilisé le test de vitesse de Google et je reçois 65%
- J'ai utilisé une version réduite des bibliothèques que j'utilise, par exemple. bootstrap etc.
- Utilisation de systemjs.
- Ceci est l'application de la graine im utilisant: https://github.com/mgechev/angular-seed
Débit:
Lorsque l'application se charge, un écran bleu s'affiche (il s'agit du bootstrap css), puis 4 secondes plus tard, l'application se charge et fonctionne très rapidement. Mais prend 4 secondes pour charger. Il semble que le fichier app.js que Systemjs minimise ralentit l’application dans son ensemble et n’affiche pas assez rapidement les vues.
Ceci est le test de vitesse de mon site internet: https://www.webpagetest.org/result/161206_F5_N87/
Ceci est mon site web:
Faites-moi savoir si vous avez besoin de plus d'informations sur mon application et de tout ce que je peux faire.
Que diriez-vous de "partage de code".
Depuis le site Webpack:
"Pour les applications Web volumineuses, il n'est pas efficace de placer tout le code dans un seul fichier, en particulier si certains blocs de code ne sont requis que dans certaines circonstances. Webpack dispose d'une fonctionnalité permettant de scinder votre base de code en" morceaux "chargés à la demande. Les groupeurs les appellent "couches", "rollups" ou "fragments". Cette fonctionnalité est appelée "code splitting".
Lien ici:
https://webpack.github.io/docs/code-splitting.html
Notez que la CLI Angular utilise Webpack.
Assurez-vous également que si votre application démarre avec des appels de données, vous ne retardez pas le rendu de vos composants en attente du renvoi de ces appels. Promesses, async, etc.
Une application d'une seule page prend généralement plus de temps lors du chargement car elle charge toutes les choses nécessaires en même temps.
J'avais également rencontré le même problème et mon équipe a optimisé notre projet de chargement en 8 secondes à 2 secondes en utilisant les méthodes suivantes.
Chargement paresseux d'un module: Le chargement paresseux de modules permet de réduire le temps de démarrage. Avec le chargement paresseux, notre application n'a pas besoin de tout charger en même temps, elle n'a qu'à charger ce que l'utilisateur s'attend à voir lors du premier chargement de l'application. Les modules chargés paresseusement ne le seront que lorsque l'utilisateur naviguera vers leurs itinéraires. Angular2 a introduit les modules dans sa version finale RC5. Voir ci-dessous pour des instructions pas à pas.
Aot Compilation: Avec AoT, le navigateur télécharge une version précompilée de l'application. Le navigateur charge le code exécutable afin de pouvoir rendre l'application immédiatement, sans attendre la compilation de l'application.
Cela réduit la taille de la charge utile: Il n'est pas nécessaire de télécharger le compilateur Angular si l'application est déjà compilée. Le compilateur correspond à environ la moitié de Angular lui-même, de sorte que son omission réduit considérablement la charge utile de l'application. Pour plus d'informations, voir this .
Webpack: Webpack est un bundler de modules très répandu, un outil permettant de regrouper le code source d'une application en morceaux pratiques et de le charger dans un navigateur. Vous pouvez configurer votre application Web Angular 2 avec Webpack (voir ce guide ).
Supprimer les scripts et la feuille de style de index.html: Supprimez tous les scripts et la feuille de style non nécessaires dans index.html. Vous pouvez charger ces scripts de manière dynamique dans le composant même en appelant un service.
Créez un fichier script.service.ts qui peut charger n'importe quel script à la demande pour ce composant.
\ 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);
});
}
}
Ceci est juste un exemple de code pour charger le script de manière dynamique, vous pouvez le personnaliser et l’optimiser vous-même en fonction de vos besoins. Pour les feuilles de style, vous devez le charger dans le composant à l'aide de styleUrl.
Utiliser la mise en cache du navigateur: Vos fichiers de page Web seront stockés dans la mémoire cache du navigateur lorsque vous utilisez la mise en cache du navigateur. Vos pages se chargeront beaucoup plus rapidement pour les visiteurs assidus, de même que les autres pages partageant ces mêmes ressources. Pour plus d'informations https://varvy.com/pagespeed/leverage-browser-caching.html
minimisez le code dans app.component.ts: réduisez le code présent dans app.component.ts, qui est toujours exécuté lorsque l'application est chargée ou rechargée.
définir des données lors de l'initialisation de l'application: si vous utilisez plusieurs appels api mêmes dans votre projet ou dans des composants, ou si vous dépendez des mêmes données dans plusieurs composants , au lieu d'appeler plusieurs fois l'API, vous pouvez enregistrer les données en tant qu'objet dans le service lors de l'initialisation de l'application. Ce service agira comme un singleton tout au long du projet et vous pourrez accéder à ces données sans appeler api.
Chargement paresseux des modules étape par étape
Structure modulaire: Nous devons diviser notre application en modules distincts. Par exemple, une application peut avoir un côté utilisateur et un côté administrateur et chacun aura ses propres composants et routes, nous allons donc séparer ces deux côtés en modules admin.module.ts et user.module.ts.
Module racine: Chaque application Angular a une classe de module racine. Par convention, il s’agit d’une classe appelée AppModule dans un fichier nommé app.module.ts. Ce module importera les deux modules ci-dessus, ainsi que le AppComponent pour l’amorçage. Vous pouvez également déclarer plusieurs composants en fonction de vos besoins. Exemple de code dans 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 { }
- Itinéraires: Maintenant, dans vos itinéraires, vous pouvez spécifier comme suit
\ 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
];
Désormais, lors du chargement de l'application, elle ne chargera plus que le code LoginComponent et AppComponent. Ces modules ne seront chargés que lors de la visite des routes/admin ou/user. Par conséquent, la charge utile à charger dans le navigateur diminuera, ce qui accélérera le chargement.
- Modules d'imbrication: Tout comme pour app.module, chaque module possède son propre ensemble de composants et de routes. Au fur et à mesure que votre projet prend de l'ampleur, l'imbrication des modules dans le module est le meilleur moyen d'optimiser car nous pouvons charger ces modules paresseusement à tout moment.
VEUILLEZ NOTER
Le code ci-dessus n'est fourni qu'à titre indicatif. Veuillez vous reporter à l'exemple complet https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html
Il est difficile de diagnostiquer le problème précis que vous rencontrez sans manipuler votre base de code et votre back-end (comme d'autres l'ont suggéré, le problème peut ne pas être du tout angular).
Cela dit, je vous recommande vivement de commencer à utiliser le angular-cli . Il a été conçu par l'équipe angular pour accomplir tout ce que vous devez faire dans une interface de ligne de commande conviviale. Donc, ma réponse est fondée sur l'utilisation de la clé angulaire.
Voici les choses générales que vous pouvez faire pour optimiser votre projet ng2 en production:
1) Compilation en avance sur le temps - Regroupement/Minification/Secouement des arbres
Regardez, oubliez le casse-tête de configurer un ensemble de tâches fastidieuses pour accomplir toutes ces choses. La compilation angular-cli gère la compilation de groupage/minimisation/arborescence/AOT en une étape simple:
ng build -prod -aot
Cela produira les fichiers js suivants dans votre dossier "dist":
inline.d41d8cd98f00b204e980.bundle.js
vendor.d41d8cd98f00b204e980.bundle.js
main.d41d8cd98f00b204e980.bundle.js
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.cssinline.d41d8cd98f00b204e980.bundle.js.gz
vendor.d41d8cd98f00b204e980.bundle.js.gz
main.d41d8cd98f00b204e980.bundle.js.gz
La compilation AOT d'Angular fera automatiquement un "bouleversement" de votre code et supprimera toutes les références inutilisées. Par exemple, vous pouvez utiliser lodash dans votre projet, mais vous n’utilisez probablement que quelques fonctions de lodash; secouer les arbres coupera toutes les parties inutilisées du lodash qui ne sont pas nécessaires dans votre construction finale. Et plus important encore, la compilation AOT pré-compilera tout votre code et toutes vos vues, ce qui signifie MOINS de temps pour que le navigateur ait besoin de faire fonctionner l'application ng2. Cliquez ici pour plus d'informations sur la compilation AOT d'angular.
2) Chargement paresseux de parties de votre application Si vous divisez davantage votre application en différentes parties, vous n'avez pas besoin de charger TOUT lors du premier chargement de votre application. Vous pouvez spécifier différents modules pour votre application, qui peuvent ensuite être regroupés (par le compilateur angular-cli aot) en différents morceaux. Lisez ici pour apprendre à organiser votre projet en modules que vous pouvez compiler en mandrins qui ne sont chargés que BESOIN. Angular-cli gérera la création de ces morceaux pour vous.
3) Angular Universel Maintenant, si vous voulez vraiment rendre votre temps de chargement EXTREMEMENT rapide, envisagez de mettre en œuvre Angular Universal , lors de la compilation de votre vue initiale sur le serveur. Je n'ai pas utilisé Angular Universel, car j'ai pu réaliser des temps de chargement rapides avec les étapes 1 et 2. Mais c'est une option intéressante dans le jeu d'outils ng2. Gardez à l'esprit que vous ne compilez pas et n'exécutez pas l'application ng2 sur le serveur, vous compilez la vue initiale côté serveur afin que l'utilisateur reçoive rapidement une secousse de HTML et qu'il PERÇOIT donc que le temps de chargement soit très rapide (même si une charge complète est nécessaire). sera toujours en retard un peu). Cette étape ne dispense pas de la nécessité des autres étapes. En bonus, Angular Universal est également censé aider au référencement.
4) Regroupement secondaire
Si je n'utilise pas de chargement paresseux, je vais généralement de l'avant et rassemble davantage les fichiers de distribution générés à partir de la compilation AOT. Ainsi, je crée un fichier main.bundle.js qui concatte les fichiers inline.js, vendor.js et main.js. J'utilise gulp pour cela.
parce que son SPA et angular 2 init trop lent. c'est ça. plus RXjs, des tonnes de polifills, etc. AOT peut aider, mais beaucoup de bibliothèques angular2 ne fonctionnent pas avec. angular universel aide vraiment