<\/p>\n
Angular, cr\u00e9\u00e9 par Google, est un outil fantastique pour construire des applications web modernes. Il vous aide \u00e0 cr\u00e9er des applications monopage (SPA) qui sont rapides, efficaces et faciles \u00e0 utiliser. Vous pouvez m\u00eame l\u2019utiliser pour cr\u00e9er des applications qui fonctionnent sur votre t\u00e9l\u00e9phone, tablette, ou m\u00eame votre ordinateur !<\/p>\n
Angular vous offre un excellent point de d\u00e9part avec sa structure organis\u00e9e. Cela rend plus facile l\u2019\u00e9criture de code propre et maintenable. Vous pouvez facilement combiner diff\u00e9rentes parties de votre application comme des blocs de construction, ce qui simplifie la conception et la mise \u00e0 jour de votre application.<\/p>\n
Rapide Bien qu\u2019Angular vous aide \u00e0 construire des applications impressionnantes, vous devez faire attention \u00e0 la performance pour vous assurer qu\u2019elles se chargent rapidement et fonctionnent sans accroc.<\/p>\n
En suivant ces conseils, vous pouvez cr\u00e9er des applications Angular \u00e0 haute performance qui offrent une exp\u00e9rience utilisateur fantastique.<\/p>\n
<\/p>\n
\u00c9tant donn\u00e9 qu\u2019Angular est un framework moderne bas\u00e9 sur Typescript qui offre des pages web dynamiques, il pr\u00e9sente quelques d\u00e9fis pour surveiller ses performances et ses temps de chargement. Il est difficile de mesurer avec pr\u00e9cision quand un nouveau contenu est rendu sur la page parce que les SPA ne d\u00e9clenchent pas de nouvelle navigation dans le navigateur une fois que la page web est charg\u00e9e<\/a>. Par cons\u00e9quent, les outils de surveillance HTTP (et aussi les outils de surveillance API<\/a>) ne fourniront pas de mesures significatives pour optimiser les temps de chargement puisque Angular ne d\u00e9clenche pas de nouvelles requ\u00eates navigateur vers le serveur.<\/p>\n De plus, bien que les r\u00e9ponses HTTP d\u00e9terminent le r\u00e9sultat d\u2019une requ\u00eate envoy\u00e9e par une page web, elles sont insuffisantes pour appr\u00e9hender les vrais temps de chargement lorsque les fichiers JavaScript int\u00e9gr\u00e9s et les ressources associ\u00e9es sont analys\u00e9s, ex\u00e9cut\u00e9s et rendus jusqu\u2019\u00e0 ce que les utilisateurs puissent pleinement interagir avec la page. Il est n\u00e9cessaire d\u2019avoir une approche diff\u00e9rente sur la fa\u00e7on de tester et surveiller les \u00e9v\u00e9nements JavaScript dans le navigateur afin de recevoir des mesures exactes des temps de chargement c\u00f4t\u00e9 client.<\/p>\n <\/p>\n Angular propose une liste d\u2019outils et techniques qui peuvent aider \u00e0 r\u00e9duire le temps de chargement d\u2019une application et \u00e0 surveiller ses performances au fil du temps, surtout apr\u00e8s qu\u2019une application ait suffisamment grossi pour g\u00e9rer plusieurs calculs lourds. Certaines de ces techniques qui peuvent aider \u00e0 diminuer le temps de chargement initial d\u2019une application et acc\u00e9l\u00e9rer la navigation entre les pages sont la compilation Ahead-of-Time (AoT)<\/em>, le d\u00e9coupage du code<\/em> et le pr\u00e9chargement des modules<\/em>. Nous discuterons de ces techniques plus en d\u00e9tail.<\/p>\n Il y a deux fa\u00e7ons principales de compiler une application Angular : Just-in-Time (JiT), qui compile l\u2019application dans le navigateur au moment de l\u2019ex\u00e9cution, et Ahead-of-Time (AoT), qui, comme son nom l\u2019indique, compile l\u2019application au moment de la construction. Le compilateur AoT assemble le code HTML et Typescript durant le processus de build avant que le navigateur ne le t\u00e9l\u00e9charge.<\/p>\n Il aide \u00e0 acc\u00e9l\u00e9rer le processus de rendu en r\u00e9duisant consid\u00e9rablement le temps que prend l\u2019application pour d\u00e9marrer. Ainsi, le navigateur charge un code ex\u00e9cutable lui permettant de rendre l\u2019application instantan\u00e9ment sans devoir attendre que l\u2019application soit compil\u00e9e. De plus, le code pr\u00e9compil\u00e9 r\u00e9duit le nombre de requ\u00eates asynchrones<\/a> vers des sources externes en ajoutant ces ressources, telles que les templates HTML et CSS externes, \u00e0 l\u2019int\u00e9rieur de l\u2019application. Par cons\u00e9quent, le code compil\u00e9 diminue les requ\u00eates AJAX s\u00e9par\u00e9es vers ces fichiers. L’exp\u00e9rience utilisateur devient donc plus fluide et plus rapide.<\/p>\n <\/p>\n En r\u00e9sum\u00e9, le d\u00e9coupage du code s\u00e9pare les bundles JavaScript de l\u2019application de mani\u00e8re \u00e0 ne pas risquer les fonctionnalit\u00e9s de l\u2019application. Il maintient le contr\u00f4le sur le code JavaScript principal pendant le temps de chargement initial<\/a>. Le d\u00e9coupage du code peut \u00eatre effectu\u00e9 \u00e0 diff\u00e9rents niveaux dans l\u2019application, comme par des points d\u2019entr\u00e9e, des modules charg\u00e9s dynamiquement et du code partag\u00e9 gr\u00e2ce au SplitChunksPlugin<\/em> tout en \u00e9vitant la duplication du code.<\/p>\n Il existe deux approches principales du d\u00e9coupage du code dans une application Angular : le d\u00e9coupage du code au niveau des composants<\/em> et le d\u00e9coupage du code au niveau des routes<\/em>. La diff\u00e9rence principale entre les deux est que le d\u00e9coupage du code au niveau des composants charge les composants individuels paresseusement m\u00eame sans navigation de route, tandis que celui au niveau des routes charge paresseusement les routes individuelles. Dans tous les cas, les deux approches peuvent \u00eatre test\u00e9es en consid\u00e9rant le TTI (Time to Interactive) de l\u2019app. Le TTI est un excellent indicateur de performance avec lequel comparer puisque il mesure combien de temps il faut \u00e0 une application pour devenir r\u00e9active. En d\u2019autres termes, combien de temps il faut \u00e0 l\u2019application pour charger suffisamment pour que l\u2019utilisateur puisse interagir avec elle.<\/p>\n <\/p>\n Le pr\u00e9chargement des modules est une technique propos\u00e9e dans les applications Angular qui permet aux modules d\u2019\u00eatre charg\u00e9s d\u00e8s que possible selon des r\u00e8gles \u00e9tablies. Les modules peuvent \u00eatre pr\u00e9charg\u00e9s tous en m\u00eame temps, lorsqu\u2019un \u00e9v\u00e9nement particulier se produit, ou simplement quelques-uns selon les circonstances. Les d\u00e9veloppeurs ont la possibilit\u00e9 de v\u00e9rifier combien de temps il faut pour charger un module et de mesurer la valeur inh\u00e9rente \u00e0 l\u2019utilisation d\u2019une strat\u00e9gie de pr\u00e9chargement. Le pr\u00e9chargement des modules dans Angular est assez similaire au lazy loading, sauf que les modules de l\u2019application sont charg\u00e9s juste apr\u00e8s que tous les modules charg\u00e9s d\u2019embl\u00e9e (eager loaded) ont \u00e9t\u00e9 charg\u00e9s avec succ\u00e8s. De cette mani\u00e8re, la latence possible est \u00e9limin\u00e9e lorsque l\u2019utilisateur navigue vers un module charg\u00e9e paresseusement tout en b\u00e9n\u00e9ficiant d’un chargement initial plus rapide de l\u2019application parce que ses modules initiaux sont charg\u00e9s en premier.<\/p>\n Les strat\u00e9gies de pr\u00e9chargement par d\u00e9faut dans Angular sont PreloadAllModules<\/em> et NoPreloading<\/em>. La premi\u00e8re signifie que tous les modules pouvant \u00eatre charg\u00e9s paresseusement sont pr\u00e9charg\u00e9s tandis que la seconde d\u00e9sactive tout pr\u00e9chargement. Dans le cas de l\u2019utilisation de PreloadAllModules, les applications peuvent potentiellement rencontrer un goulot d\u2019\u00e9tranglement si l\u2019application a un grand nombre de modules. C\u2019est alors qu\u2019il peut \u00eatre b\u00e9n\u00e9fique d\u2019envisager une strat\u00e9gie de pr\u00e9chargement personnalis\u00e9e.<\/p>\n Le concept d\u2019utiliser une strat\u00e9gie de pr\u00e9chargement personnalis\u00e9e peut avoir plus de sens dans un sc\u00e9nario d\u2019entreprise. Par exemple, pr\u00e9charger en premier les modules les plus co\u00fbteux en ressources plut\u00f4t que ceux qui sont moins gourmands pourrait \u00eatre une approche utilis\u00e9e par les d\u00e9veloppeurs. De plus, le moment o\u00f9 les modules sont pr\u00e9charg\u00e9s joue \u00e9galement un r\u00f4le important dans la r\u00e9duction des temps de chargement.<\/p>\n <\/p>\n LoadView propose une solution innovante et holistique pour contourner les limites des outils de surveillance HTTP et renforcer les outils dont disposent aujourd\u2019hui les d\u00e9veloppeurs Angular pour contr\u00f4ler, surveiller et optimiser leurs applications c\u00f4t\u00e9 client. LoadView<\/a> est une plateforme de test de charge bas\u00e9e sur le cloud qui offre une surveillance de stress des sites web<\/a>, applications web et API en simulant des milliers de connexions simultan\u00e9es en temps r\u00e9el, aidant ainsi \u00e0 identifier les goulots d\u2019\u00e9tranglement et \u00e0 v\u00e9rifier les performances globales.<\/p>\n Apr\u00e8s avoir cr\u00e9\u00e9 un compte<\/a>, les d\u00e9veloppeurs peuvent tester leurs sites web et applications web en cr\u00e9ant un dispositif qui stocke le site ou l\u2019application \u00e0 tester. En choisissant l\u2019option Site Web, les d\u00e9veloppeurs Angular peuvent tester le temps de chargement initial de la page d\u2019accueil ou de connexion de leur application en configurant un sc\u00e9nario o\u00f9 des milliers d\u2019utilisateurs tentent simultan\u00e9ment d\u2019acc\u00e9der \u00e0 la page. D\u2019autre part, en choisissant l\u2019option Application Web, les d\u00e9veloppeurs Angular peuvent \u00e9crire des scripts et tester les temps de chargement de cas d\u2019utilisation sp\u00e9cifiques de leur application<\/a>.<\/p>\n Par exemple, remplir un formulaire, naviguer dans les routes de l\u2019application, trier les donn\u00e9es charg\u00e9es depuis le serveur et, en g\u00e9n\u00e9ral, mesurer le TTI de leur application. LoadView permet aux utilisateurs de personnaliser leur type de test de charge de trois mani\u00e8res diff\u00e9rentes<\/a> avec un plan d\u2019ex\u00e9cution qui d\u00e9finit combien de connexions doivent \u00eatre \u00e9tablies sur une p\u00e9riode donn\u00e9e. De plus, LoadView va plus loin en permettant d\u2019organiser la r\u00e9partition g\u00e9ographique<\/a> des utilisateurs virtuels connect\u00e9s au site web.<\/p>\n LoadView offre aux ing\u00e9nieurs une m\u00e9thode efficace et \u00e9conomique pour automatiser le processus de test de charge par rapport aux m\u00e9thodes traditionnelles<\/a>. Fini les investissements co\u00fbteux et les processus chronophages. Les d\u00e9veloppeurs et testeurs<\/a> n\u2019ont plus \u00e0 se soucier de respecter les budgets allou\u00e9s ni de mettre en place une infrastructure. Ils peuvent se concentrer sur ce qu\u2019ils savent faire le mieux : ex\u00e9cuter des tests. Gr\u00e2ce \u00e0 des tests bas\u00e9s sur un v\u00e9ritable navigateur, les r\u00e9sultats et analyses sont directement li\u00e9s aux parcours utilisateurs, garantissant que vos applications peuvent faire face aux sc\u00e9narios de charge maximale.<\/p>\nOutils pour optimiser les temps de chargement<\/h2>\n
Compilation Ahead-of-Time<\/em><\/h3>\n
D\u00e9coupage du code<\/em><\/h3>\n
Pr\u00e9chargement des modules<\/em><\/h3>\n
Test de charge de vos applications Angular avec LoadView<\/h2>\n