Fermer

avril 18, 2019

Optimiser les performances d'une application Vue avec des composants asynchrones –


Vous voulez apprendre le jeu Vue.js? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ / mois ou essayez notre essai gratuit de 7 jours .

Les applications d'une page donnent parfois un léger flack pour leur charge initiale lente. En effet, le serveur envoie traditionnellement au client un grand ensemble de JavaScript, qui doit être téléchargé et analysé avant que quoi que ce soit ne soit affiché à l'écran. Comme vous pouvez l'imaginer, à mesure que votre application grandit, cela peut devenir de plus en plus problématique.

Heureusement, lors de la création d'une application Vue à l'aide de Vue CLI (qui utilise Webpack sous le capot), plusieurs mesures sont possibles. prendre pour contrer cela. Dans cet article, je vais vous montrer comment utiliser à la fois les composants asynchrones et la fonctionnalité de fractionnement de code de Webpack pour charger certaines parties de la page après le rendu initial de l’application. Cela réduira au minimum le temps de chargement initial et donnera à votre application une sensation plus vive.

Pour suivre ce didacticiel, vous devez avoir une connaissance de base de Vue.js et éventuellement de Node.js.

Composants asynchrones

Avant nous plongeons dans la création de composants asynchrones, examinons comment nous chargeons normalement un composant. Pour ce faire, nous allons utiliser un composant de message très simple:

Maintenant que nous avons créé notre composant, chargez-le dans notre fichier App.vue et affichez-le. . Nous pouvons simplement importer le composant et l'ajouter à l'option composants afin de pouvoir l'utiliser dans notre modèle:

Mais que se passe-t-il maintenant? Le composant Message sera chargé lors du chargement de l'application, de sorte qu'il est inclus dans le chargement initial.

Cela ne semble pas être un énorme problème pour une application simple, mais considérez quelque chose de plus complexe, comme un site Web. le magasin. Imaginons qu'un utilisateur ajoute des éléments à un panier, puis souhaite effectuer une extraction. Un clic sur le bouton de commande permet d'afficher une boîte contenant tous les détails des éléments sélectionnés. En utilisant la méthode ci-dessus, cette case à cocher sera incluse dans le groupe initial, bien que nous ayons besoin du composant uniquement lorsque l'utilisateur clique sur le bouton de commande. Il est même possible que l'utilisateur navigue sur le site Web sans jamais cliquer sur le bouton de paiement, ce qui signifie qu'il n'est pas logique de gaspiller des ressources lors du chargement de ce composant potentiellement inutilisé.

Pour améliorer l'efficacité de l'application, nous pouvons combiner les deux. techniques de chargement différé et de division de code

Le chargement différé consiste à retarder le chargement initial d'un composant. Vous pouvez voir un chargement paresseux en action sur des sites tels que medium.com, où les images sont chargées juste avant qu’elles ne soient nécessaires. C'est utile, car nous n'avons pas à gaspiller de ressources pour charger toutes les images d'un message particulier au début, car le lecteur pourrait ignorer l'article à mi-chemin.

La fonctionnalité de fractionnement de code fournie par webpack vous permet de scinder votre code en. divers paquets pouvant ensuite être chargés à la demande ou en parallèle ultérieurement. Il peut être utilisé pour charger des éléments de code spécifiques uniquement lorsqu'ils sont requis ou utilisés.

Importations dynamiques

Heureusement, Vue répond à ce scénario en utilisant un élément appelé importations dynamiques . Cette fonctionnalité introduit une nouvelle forme d'importation semblable à une fonction qui renverra une promesse contenant le composant demandé (Vue). Comme l'importation est une fonction recevant une chaîne, nous pouvons faire des choses puissantes comme charger des modules en utilisant des expressions. Les importations dynamiques sont disponibles dans Chrome depuis la version 61. Pour plus d'informations à ce sujet, consultez le site Web de Google Developers .

Le fractionnement du code est effectué par des groupeurs tels que webpack, Rollup ou Parcel, qui comprendre la syntaxe d'importation dynamique et créer un fichier séparé pour chaque module importé dynamiquement. Nous verrons cela plus tard dans l’onglet Réseau de notre console. Mais voyons d’abord la différence entre une importation statique et dynamique:

 // importation statique
importer un message de "./Message";

// import dynamique
importer ("./ Message"). then (Message => {
  // Le module de message est disponible ici ...
});

Appliquons maintenant ces connaissances à notre composant Message . Nous obtiendrons un composant App.vue ressemblant à ceci:

Comme vous pouvez le constater, la fonction import () résoudra une promesse renvoyant le composant, ce qui signifie que nous avons chargé notre composant de manière asynchrone. Si vous regardez dans l'onglet Réseau de votre devtools, vous remarquerez un fichier appelé 0.js qui contient votre composant asynchrone.

Le fractionnement de code dans le pack Webpack

Chargement conditionnel des composants asynchrones

Maintenant que nous maîtrisons les composants asynchrones, exploitons réellement leur puissance en ne les chargeant que lorsqu'ils sont réellement nécessaires. Dans la section précédente de cet article, j’ai expliqué le cas d’utilisation d’une boîte de paiement chargée uniquement lorsque l’utilisateur clique sur le bouton de paiement. Construisons cela.

Configuration du projet

Si vous n’avez pas installé Vue CLI, vous devriez le saisir maintenant:

 npm i -g @ vue / cli

Utilisez ensuite la CLI pour créer un nouveau projet et sélectionnez le préréglage par défaut lorsque vous y êtes invité:

 vue create my-store

Allez dans le répertoire du projet, puis installez la bibliothèque ant-design-vue que nous utiliserons pour styliser:

 cd my-store
npm i ant-design-vue

Importez ensuite la bibliothèque Ant Design dans src / main.js :

 importez 'ant-design-vue / dist / antd.css'.

Enfin, créez deux nouveaux composants dans src / comonents Checkout.vue et Items.vue :

 appuyez sur src / components / {3]. .vue, Items.vue}

Making the Store View

Ouvrez src / App.vue et remplacez-le par le code suivant:

Il n’ya rien d’extraordinaire à faire ici. Tout ce que nous faisons est d'afficher un message et de rendre un composant .

Ouvrez ensuite src / components / Items.vue et ajoutez le code suivant:

Dans ce fichier, nous affichons une icône représentant un panier avec la quantité actuelle d’articles achetés. Les éléments eux-mêmes sont extraits d'un tableau items déclaré en tant que propriété de données. Si vous cliquez sur le bouton Acheter d'un élément, la méthode addItem est appelée, ce qui permet de placer l'élément en question dans un tableau shoppingList .

Nous avons également ajouté un bouton Checkout à la page, et c’est là que les choses commencent à devenir intéressantes:

.

Lorsqu'un utilisateur clique sur ce bouton, un paramètre show est défini sur true . Cette valeur true est très importante pour le chargement conditionnel de notre composant asynchrone

. Quelques lignes ci-dessous, vous pouvez trouver une instruction v-if qui affiche uniquement le contenu. de

lorsque show est réglé sur true . Cette balise

contient le composant d'extraction, que nous ne voulons charger que lorsque l'utilisateur a cliqué sur le bouton d'extraction.

Le composant d'extraction est chargé de manière asynchrone dans l'option components de la section

Nous parcourons ici les accessoires que nous recevons sous la forme shoppingList et les affichons à l’écran.

Vous pouvez exécuter l’application à l’aide de la commande npm run serve . Puis accédez à http: // localhost: 8080 / . Si tout se déroule comme prévu, vous devriez voir ce qui se passe comme sur l'image ci-dessous.

Vue Webshop Demo

Essayez de cliquer dans le magasin avec l'onglet de votre réseau ouvert pour vous assurer que le Le composant Checkout est chargé uniquement lorsque vous cliquez sur le bouton Checkout .

Vous pouvez également trouver le code de cette démonstration sur GitHub .

Async avec Composant de chargement et d'erreur

Il est même possible de définir un composant de chargement et / ou d'erreur lorsque le composant asynchrone met du temps à se charger ou ne parvient pas à se charger. Il peut être utile d'afficher une animation de chargement, mais gardez à l'esprit que cela ralentit à nouveau votre application. Un composant asynchrone doit être petit et rapide à charger. Voici un exemple:

 const Message = () => ({
  composant: import ("./ Message"),
  chargement: LoadingAnimation,
  erreur: ErrorComponent
});

Conclusion

La création et la mise en oeuvre de composants asynchrones sont très simples et devraient faire partie de votre routine de développement standard. Du point de vue de l'expérience utilisateur, il est important de réduire autant que possible le temps de chargement initial afin de maintenir l'attention de l'utilisateur. J'espère que ce tutoriel vous a aidé à charger vos propres composants de manière asynchrone et à leur appliquer des conditions permettant de retarder (charge lente) la charge du composant.


Fullstack Blockchain Developer à TheLedger.be avec une passion pour le atmosphère cryptographique.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link