Optimiser les performances d'une application VUE avec des composants asynchrones

Les plats clés

• Les composants asynchrones et la fonctionnalité de spliting de code WebPack peuvent être utilisés dans une application VUE pour charger des parties de la page après le rendu initial de l'application, réduisant le temps de chargement initial et améliorant les performances de l'application.
• Vue s'adresse aux importations dynamiques, une forme d'importation en forme de fonction qui renvoie une promesse contenant le composant demandé (VUE), permettant aux modules d'être chargés à l'aide d'expressions.
• Les composants asynchrones peuvent être chargés conditionnellement, ne les chargeant que lorsqu'ils sont vraiment nécessaires, ce qui peut être réalisé en définissant un paramètre pour être vrai lorsqu'un utilisateur effectue une action spécifique.
• Il est possible de définir un composant de chargement et / ou d'erreur pour le moment où le composant asynchrone prend un certain temps pour charger ou ne pas charger, ce qui peut être utile pour afficher une animation de chargement ou un message d'erreur.

Vous voulez apprendre Vue.js à partir de zéro? Obtenez une collection entière de livres Vue couvrant les fondamentaux, les projets, les conseils et les outils et plus avec SitePoint Premium. Rejoignez maintenant pour seulement 14,99 $ / mois.

Les applications à une seule page font parfois un peu de flack pour leur charge initiale lente. En effet, traditionnellement, le serveur enverra un grand paquet de JavaScript au client, qui doit être téléchargé et analysé avant que tout soit affiché à l'écran. Comme vous pouvez l'imaginer, à mesure que votre application augmente en taille, 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), il existe un certain nombre de mesures que l'on peut prendre pour contrer. Dans cet article, je vais montrer comment l'utilisation des composants asynchrones et de la fonctionnalité de transport de code de WebPack pour charger dans certaines parties de la page après le rendu initial de l'application. Cela gardera le temps de chargement initial au minimum et donnera à votre application une sensation plus snapp.

Pour suivre ce tutoriel, vous avez besoin d'une compréhension de base de Vue.js et éventuellement de node.js.

Composants asynchrones

Avant de plonger dans la création de composants asynchrones, jetons un coup d'œil à la façon dont nous chargeons normalement un composant. Pour ce faire, nous utiliserons un composant de message très simple:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Maintenant que nous avons créé notre composant, chargeons-le dans notre fichier app.vue et affichons-le. Nous pouvons simplement importer le composant et l'ajouter à l'option Components afin que nous puissions l'utiliser dans notre modèle:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Mais que se passe-t-il maintenant? Le composant de message sera chargé chaque fois que l'application est chargée, il est donc inclus dans la charge initiale.

Cela peut ne pas sembler un énorme problème pour une application simple, mais considérez quelque chose de plus complexe comme une boutique en ligne. Imaginez qu'un utilisateur ajoute des éléments à un panier, puis souhaite vérifier, alors cliquez sur le bouton de départ qui rend une boîte avec tous les détails des éléments sélectionnés. À l'aide de la méthode ci-dessus, cette case de paiement sera incluse dans le bundle initial, bien que nous n'ayons besoin du composant que lorsque l'utilisateur clique sur le bouton de départ. Il est même possible que l'utilisateur navigue sur le site Web sans jamais cliquer sur le bouton de cachat, ce qui signifie qu'il n'a pas de sens de gaspiller des ressources pour charger ce composant potentiellement inutilisé.

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

Le chargement paresseux consiste à retarder la charge initiale d'un composant. Vous pouvez voir le chargement paresseux en action sur des sites comme Medium.com, où les images sont chargées juste avant qu'elles soient nécessaires. Ceci est utile, car nous n'avons pas à gaspiller des ressources en chargeant toutes les images pour un message particulier à l'avance, car le lecteur peut ignorer l'article à mi-chemin.

La fonction de division de code WebPack vous permet de diviser votre code en divers faisceaux qui peuvent ensuite être chargés à la demande ou en parallèle à un moment ultérieur. Il peut être utilisé pour charger des pièces de code spécifiques uniquement lorsqu'elles sont nécessaires ou utilisées.

Imports dynamiques

Heureusement, Vue s'adresse à ce scénario en utilisant quelque chose appelé les importations dynamiques. Cette fonctionnalité introduit une nouvelle forme d'importation en forme de fonction qui renvoie une promesse contenant le composant demandé (VUE). Comme l'importation est une fonction recevant une chaîne, nous pouvons faire des choses puissantes comme le chargement des modules à l'aide d'expressions. Les importations dynamiques sont disponibles dans Chrome depuis la version 61. Plus d'informations à leur sujet peuvent être trouvées sur le site Web de Google Developers.

La fractionnement du code est prise en charge par des bundlers comme WebPack, Rollup ou Parcel, qui comprennent la syntaxe d'importation dynamique et créent un fichier séparé pour chaque module importé dynamiquement. Nous verrons cela plus tard dans l'onglet réseau de notre console. Mais d'abord, jetons un coup d'œil à la différence entre une importation statique et dynamique:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Maintenant, appliquons ces connaissances à notre composant de message, et nous obtiendrons un composant app.vue qui ressemble à ceci:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Comme vous pouvez le voir, la fonction import () résoudra une promesse qui renvoie le composant, ce qui signifie que nous avons réussi à charger notre composant de manière asynchrone. Si vous jetez un coup d'œil dans l'onglet réseau de Devtools, vous remarquerez un fichier appelé 0.js qui contient votre composant asynchrone.

Chargement conditionnel des composants asynchrones

Maintenant que nous avons une poignée sur les composants asynchrones, ne récoltons vraiment leur pouvoir qu'en les chargeant uniquement lorsqu'ils sont vraiment nécessaires. Dans la section précédente de cet article, j'ai expliqué le cas d'utilisation d'une case de départ qui n'est chargée que lorsque l'utilisateur frappe le bouton de départ. Construisons cela.

Configuration du projet

Si vous n'avez pas installé Vue CLI, vous devriez l'attraper maintenant:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Ensuite, utilisez la CLI pour créer un nouveau projet, en sélectionnant le préréglage par défaut lorsque vous êtes invité:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

transformer dans le répertoire du projet, puis installer la bibliothèque ant-design-vue, que nous utiliserons pour le style:

<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span>  <span>// Message module is available here...
</span><span>});
</span>

Ensuite, importez la bibliothèque de conception des fourmis dans src / main.js:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span><span>Message</span>: () => import("./Message")
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Enfin, créez deux nouveaux composants dans SRC / COMONENTS, Checkout.Vue and Items.Vue:

<span>npm i -g @vue/cli
</span>

Faire de la vue du magasin

Ouvrez Src / App.vue et remplacez le code par ce qui suit:

vue create my-store

Il n'y a rien de sophistiqué ici. Tout ce que nous faisons, c'est afficher un message et rendre un composant .

Ensuite, ouvrez Src / Components / Items.Vue et ajoutez le code suivant:

<span>cd my-store
</span><span>npm i ant-design-vue
</span>

Dans ce fichier, nous affichons une icône de panier avec le montant actuel des articles achetés. Les éléments eux-mêmes sont tirés d'un tableau des éléments, déclarés comme une propriété de données. Si vous cliquez sur le bouton Acheter d'un article, la méthode Additem est appelée, ce qui appuiera l'article en question vers un tableau de liste de commerce. À son tour, cela augmentera le total du chariot.

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

<span>import 'ant-design-vue/dist/antd.css'
</span>

Lorsqu'un utilisateur clique sur ce bouton, nous définissons un spectacle de paramètre pour être vrai. Cette vraie valeur est très importante dans le but de charger conditionnellement notre composant asynchrone.

quelques lignes ci-dessous, vous pouvez trouver une instruction V-IF, qui affiche uniquement le contenu du

lorsque Show est défini sur true. Cette balise

contient le composant de paiement, que nous voulons charger uniquement lorsque l'utilisateur a appuyé sur le bouton de caisse.

Le composant de paiement est chargé de manière asynchrone dans l'option Composants dans la section . Ce qui est cool ici, c'est que nous pouvons même transmettre des arguments au composant via l'instruction en V. Comme vous pouvez le voir, il est relativement facile de créer des composants asynchrones conditionnels:

<span>touch src/components/{Checkout.vue,Items.vue}
</span>

Ajoutons rapidement le code du composant de caisse dans SRC / Components / Checkout.Vue:

<span><span><span><template</span>></span>
</span>  <span><span><span><div</span> id<span>="app"</span>></span>
</span>    <span><span><span><h1</span>></span>{{ msg }}<span><span></h1</span>></span>
</span>    <span><span><span><items</span>></span><span><span></items</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import items from "./components/Items"
</span></span></span><span><span>
</span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    items
</span></span><span><span>  <span>},
</span></span></span><span><span>  <span>name: 'app',
</span></span></span><span><span>  <span>data () {
</span></span></span><span><span>    <span>return {
</span></span></span><span><span>      <span>msg: 'My Fancy T-Shirt Store'
</span></span></span><span><span>    <span>}
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span><span><span>#app</span> {
</span></span></span><span><span>  <span>font-family: 'Avenir', Helvetica, Arial, sans-serif;
</span></span></span><span><span>  <span>-webkit-font-smoothing: antialiased;
</span></span></span><span><span>  <span>-moz-osx-font-smoothing: grayscale;
</span></span></span><span><span>  <span>text-align: center;
</span></span></span><span><span>  <span>color: #2c3e50;
</span></span></span><span><span>  <span>margin-top: 60px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>h1<span>, h2</span> {
</span></span></span><span><span>  <span>font-weight: normal;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>ul {
</span></span></span><span><span>  <span>list-style-type: none;
</span></span></span><span><span>  <span>padding: 0;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>li {
</span></span></span><span><span>  <span>display: inline-block;
</span></span></span><span><span>  <span>margin: 0 10px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>a {
</span></span></span><span><span>  <span>color: #42b983;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Ici, nous enroulons sur les accessoires que nous recevons en tant que liste commerciale et les présentons à l'écran.

Vous pouvez exécuter l'application à l'aide de la commande NPM Run Serve. Accédez ensuite à http: // localhost: 8080 /. Si tout s'est passé comme prévu, vous devriez voir quelque chose comme ce qui est montré dans l'image ci-dessous.

Essayez de cliquer sur le magasin avec votre onglet réseau ouvert pour vous assurer que le composant de paiement n'est chargé que lorsque vous cliquez sur le bouton Découvrez .

Vous pouvez également trouver le code de cette démo 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 pour le moment où le composant asynchrone prend un certain temps pour charger ou ne pas charger. Il peut être utile de montrer 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:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Conclusion

La création et la mise en œuvre de composants asynchrones est très facile et devrait faire partie de votre routine de développement standard. Du point de vue de l'UX, il est important de réduire autant que possible le temps de chargement initial pour 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 pour retarder (charge paresseuse) la charge du composant.

Des questions fréquemment posées sur les composants asynchronisés Vue

Quels sont les avantages de l'utilisation des composants asynchronisés Vue?

Les composants asynchronisés Vue sont une caractéristique puissante de Vue.js qui permet aux développeurs de charger les composants de manière asynchrone. Cela signifie que le composant n'est chargé que lorsqu'il est nécessaire, ce qui peut améliorer considérablement les performances de votre application. Ceci est particulièrement bénéfique pour les grandes applications où le chargement de tous les composants peut à la fois ralentir l'application. En chargeant des composants de manière asynchrone, vous pouvez vous assurer que votre application reste rapide et réactive, offrant une meilleure expérience utilisateur.

Comment implémenter les composants asynchronisés Vue dans mon application?

Implémentation de composants asynchrones VUe Dans Votre application est relativement simple. Vous pouvez utiliser la méthode Vue.Component et renvoyer une promesse dans la fonction d'usine. La promesse doit se résoudre avec la définition des composants. Voici un exemple de base:

vue.component ('async-example', function (résoudre, rejeter) {
setTimeout (function () {
// passer la définition du composant au rappel Resolve
Resolve ({
Modèle: '

Je suis async!

'
})
}, 1000)
})
Dans cet exemple, le composant est chargé de manière asynchrone après un délai de 1 seconde.

Puis-je utiliser des composants asynchronisés Vue avec le routeur Vue?

Oui, vous pouvez utiliser des composants asynchronisés Vue avec un routeur Vue. En fait, Vue Router a une prise en charge intégrée pour la division des composants et le chargement asynchrone. Lorsque vous définissez vos itinéraires, au lieu de fournir directement le composant, vous pouvez fournir une fonction qui renvoie une promesse qui résout le composant. Cela vous permet de charger des composants uniquement lorsqu'ils sont nécessaires, améliorant les performances de votre application.

Quelle est la différence entre les composants asynchrones Vue et les composants Vue réguliers?

La principale différence entre les composants asynchrones Vue et les composants Vue réguliers est la façon dont ils sont chargés. Les composants Vue réguliers sont chargés de manière synchrone, ce qui signifie qu'ils sont chargés en une fois lorsque l'application démarre. D'un autre côté, les composants asynchronisés Vue sont chargés de manière asynchrone, ce qui signifie qu'ils sont chargés uniquement lorsqu'ils sont nécessaires. Cela peut améliorer considérablement les performances de votre application, en particulier pour les grandes applications avec de nombreux composants.

Comment puis-je gérer les erreurs lors de l'utilisation de composants asynchronisés Vue?

Lorsque vous utilisez des composants asynchronisés Vue, vous pouvez gérer Erreurs en fournissant une deuxième fonction à la méthode Vue.component. Cette fonction sera appelée si la promesse est rejetée. Voici un exemple:

vue.component ('async-example', function (résoudre, rejeter) {
setTimeout (function () {
// transmettez la définition du composant au rappel Resolve
Resolve ({
Template: '

je suis async!

'
})
}, 1000)
}, fonction (raison) {
console. Erreur (raison)
})
Dans cet exemple, si la promesse est rejetée, l'erreur sera enregistrée à la console.

Puis-je utiliser des composants asynchronisés Vue avec Vuex?

Oui, vous pouvez utiliser des composants asynchronisés Vue avec Vuex. Vuex est une bibliothèque de gestion d'État pour Vue.js, et il fonctionne bien avec les composants asynchronisés Vue. Vous pouvez envoyer des actions et commettre des mutations à partir de vos composants asynchrones comme vous le feriez avec des composants réguliers.

Comment puis-je tester les composants asynchronisés Vue?

Tester les composants asynchronisés Vue est similaire à tester les composants Vue réguliers . Vous pouvez utiliser des bibliothèques comme Vue Test Utils et Kest pour écrire des tests unitaires pour vos composants. Cependant, puisque les composants asynchrones sont chargés de manière asynchrone, vous devrez peut-être utiliser Async / Waiter dans vos tests pour attendre que le composant soit chargé avant d'effectuer des affirmations.

Puis-je utiliser les composants asynchrones Vue avec Vue Cli?

Oui, vous pouvez utiliser des composants asynchronisés Vue avec Vue CLI. Vue CLI est un outil de ligne de commande pour les projets d'échafaudage Vue.js, et il a une prise en charge intégrée pour les composants asynchronisés. Vous pouvez utiliser la méthode Vue.Component pour définir les composants asynchrones dans votre projet Vue CLI.

Comment puis-je optimiser les performances des composants asynchronisés Vue?

Il existe plusieurs façons d'optimiser les performances des performances des performances des performances des performances des performances des performances? Vue Async Composants. Une façon consiste à utiliser le fractionnement du code, ce qui vous permet de diviser votre code en morceaux plus petits qui peuvent être chargés à la demande. Une autre façon consiste à utiliser le chargement paresseux, qui vous permet de charger des composants uniquement lorsqu'ils sont nécessaires. Vous pouvez également utiliser la prélecture et le préchargement pour charger des composants en arrière-plan lorsque le navigateur est inactif.

Puis-je utiliser des composants asynchronisés Vue avec nuxt.js?

Oui, vous pouvez utiliser des composants asynchronisés Vue avec nuxt.js. Nuxt.js est un cadre pour la création d'applications Vue.js, et il a une prise en charge intégrée pour les composants asynchrones. Vous pouvez définir des composants asynchrones dans votre projet nuxt.js à l'aide de la méthode Vue.Component.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!