Comment puis-je améliorer les performances de charge des applications Angular2?

Question

Angular2 application est en cours de chargement lent, comment puis-je améliorer les performances de chargement?

J'utilise Angular2, texte dactylographié avec html5.

actuellement mon application prend 4 secondes à se charger. J'ai d'accueil avec Firebase et utiliser cloudflare.

Choses que je suis en train de faire / info:

• J'ai des images compressées.
• Je minify css
• Je rapetisser js.
• J'ai utiliser asynchrone sur mes scripts.
• Mes scripts sont dans mon .
• Les scripts sont autour de 700kb
• J'ai utilisé google test de vitesse et d'obtenir 65%
• J'ai utilisé la version compacte de la libs-je utiliser, par exemple, bootstrap, etc.
• À l'aide de systemjs.
• C'est la graine application im en utilisant: https://github.com/mgechev/angular-seed

Flux:

Lorsque l'application des charges, il affiche un écran bleu (c'est le bootstrap css) et puis 4 secondes plus tard, l'application des charges et agit très rapidement. Mais faut 4 secondes à se charger. Il semble que le app.js fichier systemjs minifies de ralentissement de l'ensemble de l'application, et ne pas montrer des vues assez rapide.

C'est mon site de test de vitesse: https://www.webpagetest.org/result/161206_F5_N87/

Ceci est mon site web:

https://thepoolcover.co.uk/

Laissez-moi savoir si vous avez besoin de plus d'informations sur mon application et toutes les autres choses que je peux faire.

Answer 1

Une single page application prend généralement plus de temps lors du chargement qu'il se charge de toutes les choses nécessaires à la fois.

J'avais également fait face à un même problème et mon équipe a optimisé notre projet de chargement en 8 secondes à 2 secondes en utilisant une des méthodes suivantes.

1. Paresseux du chargement du module : chargement différé des modules d'aide à diminuer le temps de démarrage. Avec le chargement paresseux notre application n'a pas besoin de charger tout à la fois, il suffit de charger ce que l'utilisateur s'attend à voir lors de la première application de la charge. Les Modules qui sont paresseusement chargées seront chargés uniquement lorsque l'utilisateur navigue à leurs itinéraires. Angular2 a introduit des modules dans sa version finale RC5. Voir ci-dessous pour l'étape-par-étape.

2. Aot Compilation : Avec AoT, le navigateur télécharge une version pré-compilée de l'application. Le navigateur charge le code de l'exécutable de sorte qu'il peut rendre l'application immédiatement, sans attendre de les compiler la première application.

   Il réduit la taille de la charge utile : Il n'y a pas besoin de télécharger l'angle de compilateur si l'application est déjà compilé. Le compilateur est à peu près la moitié de l'Angulaire de lui-même, de sorte que l'omission il réduit considérablement l'application de la charge utile. Pour plus d'infos, voir ce.

3. Webpack : Webpack populaire est un module de bundler, un outil pour empaqueter le code source de l'application en pratique des morceaux et pour le chargement de code à partir d'un serveur à un navigateur. Vous pouvez configurer votre Angulaire 2 application web avec webpack (voir ce guide).

4. Supprimer les scripts,la feuille de style index.html : Supprimer tous les scripts et la feuille de style qui ne sont pas nécessaires dans index.html. Vous pouvez charger ces script de façon dynamique dans le composant lui-même en appelant un service.

   Faire un fichier de script.service.ts qui permet de charger un script à la demande de 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);
    });
  }
}

C'est juste un exemple de code pour charger le script de façon dynamique, vous pouvez personnaliser et d'optimiser par vous-même en fonction de votre besoin. Pour la feuille de style, vous devez le charger dans le composant à l'aide de styleUrl.

5. Utiliser la mise en Cache du Navigateur : Votre page web fichiers seront stockés dans le cache du navigateur lorsque vous utilisez la mise en cache du navigateur. Vos pages se chargent beaucoup plus rapidement pour les visiteurs et donc les autres pages que la part de ces mêmes ressources. Pour plus d'info https://varvy.com/pagespeed/leverage-browser-caching.html

6. minimiser le code dans l'app.composante.ts : minimiser le code présent dans l'app.composante.ts qui toujours s'exécuter lorsque l'application se charge ou recharge.

7. ensemble de données sur l'application de l'Initialisation : si vous utilisez la même api appelle plusieurs fois dans votre projet ou dans les composants, ou vous êtes dépendant de même des données dans de multiples composants, au lieu de l'appel de l'api plusieurs fois ce que vous pouvez faire est de sauver les données comme un objet de service sur l'application de l'initialisation. Ce service va agir comme un singleton tout au long du projet et vous peut accéder à ces données sans appel de l'api.

---

Chargement différé des modules étape par étape

1. Structure modulaire : Nous avons à diviser notre Application en modules distincts. Par exemple, une application peut avoir un côté utilisateur et un admin côté et chacun aura ses propres composants différents et des routes, nous allons donc séparer ces deux côtés en modules admin.le module.ts et de l'utilisateur.le module.ts.

2. La racine du Module : Chaque Angulaire application dispose d'un module racine de la classe. Par convention, il est une classe appelée AppModule dans un fichier nommé app.le module.ts , ce module à importer les deux ci-dessus module et aussi la AppComponent pour bootstrap. Vous pouvez également déclarer les multiples composants en fonction de votre besoin. Exemple de code dans l'application.le module.ts:

\app.le 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. Itinéraires : Maintenant dans vos routes, vous pouvez spécifier comme suit

\app.routeur.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
];

Maintenant, lors du chargement de l'application, il ne charge que les LoginComponent et AppComponent code. Ces modules seront chargés uniquement lorsqu'on visite /admin ou utilisateur /les routes. Par conséquent, il va diminuer la taille de la charge utile pour le chargement dans le navigateur, résultant d'un chargement rapide.

4. L'imbrication des Modules : tout comme app.module chaque module a son propre ensemble de composants et de routes. Que votre projet devient plus grande, l'imbrication des modules à l'intérieur du module est la meilleure façon d'optimiser, parce que nous pouvons paresseusement charger les modules à chaque fois que nous avons besoin.

---

VEUILLEZ NOTER

Code ci-dessus est seulement pour plus d'explications, veuillez vous référer pour exemple complet https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Answer 2

Comment au sujet de "code splitting".

À partir de la Webpack site:

"Pour les grosses applications web il n'est pas efficace pour mettre tout le code dans un seul fichier, surtout si certains de ces blocs de code sont uniquement nécessaires dans certains cas. Webpack a une fonction pour diviser votre base de code en "morceaux" qui sont chargés à la demande. Certains autres bundlers les appeler des "couches", "cumulatifs", ou "fragments". Cette fonctionnalité est appelée "code splitting".

Lien ici:

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

Notez que l'angle de la CLI utilise Webpack.

Aussi, assurez-vous que si votre application s'amorce avec les appels de données, que vous n'êtes pas tenue, le rendu de vos composants en attente sur ces appels au retour. Des promesses, async, etc.

Answer 3

Il est difficile de diagnostiquer précisément le problème que vous rencontrez sans les mains sur l'ensemble de votre base de code et backend (comme d'autres l'ont suggéré, le problème peut être pas angulaire).

Cela dit, je vous recommande FORTEMENT de commencer à utiliser le angulaires-cli. Il a été conçu par l'angulaire de l'équipe pour accomplir toutes les choses que vous devez faire dans un facile à utiliser l'interface de ligne de commande. Donc, ma réponse est basée sur l'utilisation de la angulaires-cli.

Ici sont les choses que vous pouvez faire pour optimiser votre ng2 de projet pour la production:

1) Avance (AoT) Compilation - Groupage/Minification/Arbre qui tremble

Regardez, oublier le mal de tête de la configuration d'un tas de gulp tâches à accomplir toutes ces choses. Le angulaires-cli poignées de Groupage/Minification/Arbre qui tremble/AOT compilation en une seule étape facile:

ng construire -prod-aot

Ceci va produire la suite de js fichiers dans votre répertoire "dist":

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

Vous aurez également la gzippé versions de ces fichiers pour PLUS d'optimisation:

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

Angulaire du AOT compilation fera automatiquement l'arborescence "secouer" sur votre code et de se débarrasser de toutes les références. Par exemple, vous pouvez utiliser lodash dans votre projet, mais vous aurez probablement utiliser un peu de lodash fonctions; arbre secouant va couper toutes les parties non utilisées de lodash qui ne sont pas nécessaires dans votre version finale. Et le plus important, AOT compilation sera pré-compiler l'ensemble de votre code et de points de vue qui signifie MOINS de temps, le navigateur doit obtenir le ng2 application de roulement. Cliquez ici pour plus d'infos sur angulaire du AOT compilation.

2) le chargement Paresseux parties de votre application Si vous sculpter votre application en plusieurs parties, vous n'avez pas besoin de charger EVERYING lors de votre première application des charges. Vous pouvez spécifier différents modules en fonction de votre application, qui peuvent ensuite être regroupés (par le angulaires-cli aot compilateur) dans les différents morceaux. Lire ici pour apprendre comment organiser votre projet en modules que vous pouvez compiler dans des mandrins qui ne sont chargés QUE de BESOIN. Angulaires-cli gérer la création de ces morceaux pour vous.

3) Angulaire Universelle Maintenant, si vous voulez vraiment faire de votre temps de chargement EXTRÊMEMENT rapide, alors vous voudrez à envisager la mise en œuvre Angulaire Universelle, qui est lorsque vous compilez votre point de vue initial SUR LE SERVEUR. Je n'ai pas utilisé Angulaire Universelle comme je l'ai été en mesure d'atteindre des temps de chargement rapide avec les étapes 1 et 2. Mais c'est une option excitante dans le ng2 d'outils. Gardez à l'esprit que vous n'avez pas à compiler ou exécuter le ng2 application sur le serveur, vous compilez le point de vue initial serverside de sorte que l'utilisateur reçoit rapidement une secousse de l'html et donc l'utilisateur PERÇOIT le temps de chargement très rapide (même si une pleine charge sera encore à la traîne un peu). Cette étape ne permet pas d'éviter la nécessité pour les autres étapes. Comme un bonus, Angulaire Universelle est censé aider avec la SEO.

4) l'enseignement Secondaire regroupement

Si je ne suis pas en utilisant le chargement paresseux, j'ai l'habitude d'aller de l'avant et de poursuivre le bundle de la distribution des fichiers qui sont générés à partir AOT compilation. J'ai donc créer un main.bundle.js fichier concats inline.js, vendor.js et main.js les fichiers. J'utilise gulp pour cela.

Answer 4

parce que son SPA et angulaire 2 init trop lent. c'est tout. plus RXjs, des tonnes de polifills, etc. AOT peut aider mais beaucoup de bibliothèques angular2 ne fonctionnent pas avec. universel angulaire aide vraiment

Answer 5

Essayez de désactiver les cartes source en exécutant ng serve --sourcemap=false