Optimisation des applications angulaires

Angular est le framework de développement d'applications Web à page unique le plus populaire, bien que cela ne signifie pas que les applications Angular ne peuvent contenir qu'une seule page. En utilisant ce cadre, vous pouvez créer des sites composés de dizaines de pages. La dernière version d'Angular, grâce aux efforts de l'équipe de développement et de la communauté des passionnés, est bien optimisée. Cependant, lorsqu'il s'agit d'une application spécifique, il ne faut pas oublier certaines choses qui affectent ses performances.



Le matériel, dont nous publions la traduction aujourd'hui, révèlera six domaines d'optimisation des applications angulaires.

1. Chargement paresseux et optimisation du bundle principal

Si le chargement différé n'est pas utilisé lors de la préparation de la version de production de l'application, le fichier dist verra probablement les fichiers suivants.

 polyfills.js scripts.js runtime.js styles.css main.js 

Le fichier polyfills.js permet de polyfills.js assurer qu'une application écrite en utilisant les dernières fonctionnalités de la technologie Web est compatible avec différents navigateurs.

Le fichier script.js contient les scripts décrits dans la section scripts du fichier angular.json . Voici un exemple simple d'une telle section.

 "scripts": [  "myScript.js", ] 

Le fichier runtime.js est le chargeur Webpack. Il contient les outils Webpack nécessaires pour télécharger d'autres fichiers.

Le fichier styles.css contient les styles déclarés dans la section styles du fichier angular.json . Voici un exemple de cette section.

 "styles": [ "src/styles.css", "src/my-custom.css" ], 

Le fichier main.js stocke tout le code d'application, y compris les composants (code TS, HTML et CSS), les pipelines, les directives, les services et les modules importés (y compris les modules tiers).

À mesure que l'application grandit et se main.j taille du fichier main.j . Cela peut devenir un problème, car, pour former une page, le navigateur, en plus de résoudre d'autres tâches de visualisation des données, doit télécharger et analyser le fichier main.js Si ce fichier est suffisamment volumineux, son traitement sera une tâche intimidante non seulement pour les mobiles, mais aussi pour les navigateurs de bureau.

La façon la plus simple de résoudre ce problème consiste à diviser l'application en plusieurs modules, qui utilisent la technique de chargement paresseux. Avec cette approche, Angular génère un fichier séparé pour chaque module, qui ne sera téléchargé que lorsqu'il sera nécessaire (généralement lors de l'activation d'une certaine route).

Afin de démontrer l'application de la technique de chargement paresseux, deux composants ont été créés - app.component et second.component . Les deux sont dans le module app.module , le chargement app.module n'est pas appliqué lorsque vous travaillez avec eux.

Le composant app.component extrêmement simple. Il affiche deux boutons, dont l'un est responsable du passage à second.component , et le second ramène à app.component .


Application de composant

Le Second modèle de composant contient un très gros morceau de texte avec un volume d'environ 1 Mo.


Deuxième composante

Puisque la technique de chargement paresseux n'est pas appliquée ici, notre application aura un grand fichier main.js contenant le code app.component et second.component .

Si vous ouvrez les outils de développement Chrome et regardez l'onglet Réseau, vous pouvez estimer la taille du fichier main.js À savoir, il est de 1,3 Mo.


Analyse de la taille des fichiers avec Chrome Developer Tools

Le problème ici est que la plupart du temps lorsque vous travaillez avec notre projet, l'utilisateur sera sur sa page principale, et non sur une autre page, donc télécharger tout le code en un seul fichier n'est pas une bonne idée. Le code du deuxième composant peut être extrait dans un module séparé, qui ne sera chargé que si l'utilisateur accède à la page correspondante. Cela se traduit par une réduction significative du fichier main.js , ce qui donne un premier chargement très rapide sur la page principale du site.

Lorsque vous utilisez la technique de chargement paresseux, après avoir terminé le processus de génération de projet, un fichier comme 4.386205799sfghe4.js sera créé. C'est là que sera stocké le code qui ne se chargera pas lors du premier chargement du site. Par conséquent, si vous ouvrez maintenant le site et analysez-le, il s'avère que les tailles de main.js ne sont que de 266 Ko.


Réduction de la taille de main.js

Un gros fichier supplémentaire de 1 Mo n'est téléchargé qu'après avoir accédé à la page correspondante.


Télécharger un fichier supplémentaire

Nous avons appliqué un chargement paresseux, mais nous ne pouvons pas dire qu'une telle solution nous convient parfaitement. Le fait est que cette approche ralentit la première transition de l'utilisateur vers la page, dont la sortie nécessite un fichier volumineux séparé. Heureusement, Angular fournit un moyen de résoudre ce problème. À savoir, nous parlons de la technologie PreloadingStrategy .

En l'utilisant, nous pouvons informer le framework qu'après le chargement et le traitement du module principal (fichier main.js ), il main.js en arrière-plan les autres modules. Par conséquent, lorsque l'utilisateur accède à une page qui nécessitait auparavant l'affichage d'un fichier volumineux, il s'avère que le fichier a déjà été téléchargé. Voici un exemple de code qui précharge tous les modules.

 import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ {   path: 'second',   loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules}) 

En appliquant le chargement différé lors de l'optimisation des applications angulaires, il est recommandé de s'efforcer de diviser le projet en autant de modules que possible. De plus, vous devez faire attention à les précharger. Cela permettra au fichier main.js d'être petit, ce qui signifie un chargement et un affichage plus rapides de la page principale du projet.

2. Analyse de bundle à l'aide de Webpack Bundle Analyzer

Si même après avoir divisé la logique du projet en plusieurs modules, il s'avère que main.js est toujours trop volumineux (pour les applications de petite et moyenne taille, l'auteur de ce document suggère de considérer le fichier comme étant de 1 Mo), vous pouvez continuer à optimiser l'application à l'aide de Webpack Bundle Analyzer. Ce package npm vous permet de visualiser les résultats de Webpack dans une arborescence qui prend en charge le zoom. Pour utiliser Webpack Bundle Analyzer, installez-le dans un projet Angular en tant que dépendance de développement.

 npm install --save-dev webpack-bundle-analyzer 

Ensuite, nous modifions la section de script du fichier package.json en y ajoutant le texte suivant.

 "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json" 

Veuillez noter que l'adresse du fichier dist/stats.json peut être différente dans votre projet. Par exemple, si vous avez terminé de regrouper les fichiers dans le dossier dist/browser , vous devrez réécrire la ligne ci-dessus comme ceci: dist/browser/stats.json .

Exécutez maintenant l'analyseur.

 npm run bundle-report 

Après avoir exécuté cette commande, l'assemblage de production de l'application sera généré et les statistiques de chaque ensemble seront affichées. Voici à quoi ressemble le résultat de la visualisation de ces données.


Analyse de projet à l'aide de Webpack Bundle Analyzer

Vous pouvez maintenant analyser la composition de chaque bundle. Il s'agit d'un outil très utile qui vous permet d'identifier les dépendances dont vous pouvez vous passer.

3. Création de plusieurs petits modules pour le partage

Les modules qui partagent différentes parties de l'application contribuent à la mise en œuvre du principe DRY , mais parfois même de tels modules, à mesure que l'application se développe, deviennent de plus en plus. Par exemple, si nous avons un certain module SharedModule contenant de nombreux autres modules, composants, pipelines, l'importation d'un tel module dans app.module augmentera la taille du bundle main.js , car un tel mouvement ne conduira pas seulement à l'importation de ce dont main.js besoin, mais aussi tout ce qui se trouve dans SharedModule . Afin d'éviter cette situation, vous pouvez créer un autre module, quelque chose comme HomeSharedModule , conçu pour être partagé par le module principal et ses composants.

La présence dans le projet de plusieurs modules destinés au partage est meilleure que la présence d'un seul de ces modules, généralement de grande taille.

4. Utilisation de la technique de chargement paresseux pour les images qui ne sont pas visibles sur la page

Lorsque vous chargez la page principale de l'application pour la première fois, il peut s'avérer qu'elle contient des images qui ne sont pas visibles par l'utilisateur (elles se trouvent en dehors de la zone de visualisation). Pour les voir, vous devez faire défiler la page. Mais ces images invisibles se chargent lorsque la page se charge. S'il y en a beaucoup, cela affectera la vitesse de chargement des pages. Pour faire face à ce problème, vous pouvez appliquer la technique de chargement paresseux aux images, en les chargeant uniquement lorsque l'utilisateur les atteint. Il existe un outil JS utile, Intersection Observer , qui facilite la mise en œuvre du chargement d'images paresseuses. De plus, afin de réutiliser, sur la base de celui-ci, vous pouvez créer une directive appropriée. Des détails à ce sujet peuvent être trouvés ici .

5. Utilisation du défilement virtuel pour les longues listes

La septième version d'Angular a la possibilité d'utiliser le défilement virtuel . Cette technologie charge des éléments dans le DOM et les décharge en fonction de la proportion de la liste visible par l'utilisateur. Cela accélère considérablement le travail des applications qui utilisent de longues listes.


Seuls les éléments de liste visibles sont affichés sur la page.

6. Utilisation de la stratégie FOUT pour travailler avec des polices au lieu de la stratégie FOIT

De nombreux sites utilisent des polices personnalisées. Ils sont généralement très attrayants, mais leur application crée une charge supplémentaire sur le navigateur, car il doit télécharger ces polices et les préparer au travail. Lorsque vous utilisez des polices non standard, par exemple téléchargées à partir d'un service tiers comme Google Fonts, les deux scénarios suivants sont possibles:

1. Le navigateur télécharge la police, la traite et n'affiche alors que le texte. Tant que la police n'est pas prête à être utilisée, le texte tapé dans cette police sera invisible. C'est ce qu'on appelle FOIT (Flash de texte invisible).
2. Le navigateur affiche initialement le texte à l'aide d'une police standard, lors du chargement d'une police externe. Lorsque cette police est prête à être utilisée, la police standard change pour cette police particulière. En conséquence, il s'avère que le texte de la page sera affiché dans une police standard jusqu'à ce qu'une police spéciale soit chargée, après quoi le texte sera de nouveau affiché, mais avec une nouvelle police. C'est ce qu'on appelle FOUT (Flash de texte sans style).

La plupart des navigateurs utilisent des polices non standard utilisant la stratégie FOIT; la stratégie FOUT n'est utilisée que dans Internet Explorer. Pour utiliser FOUT au lieu de FOIT, vous pouvez utiliser le descripteur d' font-display de @font-face pour @font-face , et dire au navigateur si nous voulons que le texte soit d'abord affiché dans une police standard, puis la nôtre, ou nous serons satisfaits d'une certaine période d'invisibilité du texte . Si vous êtes intéressé par le sujet des polices, jetez un œil à ce matériel. En particulier, vous trouverez ici des informations sur les caractéristiques des polices et des recommandations concernant le choix des stratégies FOIT ou FOUT.

Résumé

Ici, nous avons examiné plusieurs techniques pour optimiser les applications angulaires. En fait, il y en a beaucoup plus. En particulier, nous parlons du rendu du serveur, de l'utilisation de travailleurs de service et des pages AMP. L'opportunité de l'optimisation et le choix de ses méthodes dépendent d'un projet spécifique - de ses caractéristiques et de ses objectifs.

Chers lecteurs! Quelles approches utilisez-vous pour optimiser les applications angulaires?