Ce que vous devez savoir sur la division de code avec Nuxt.js

Découvrez comment fonctionne le fractionnement de code dans Nuxt, pourquoi vous devriez vous en soucier et comment vous pouvez l'implémenter dans vos applications Vue.

Introduction / TLDR 🤓

Récemment, quelqu'un qui est familier avec la création d'applications Vue standard m'a demandé comment gérer le fractionnement de code avec Nuxt. Je ne pouvais pas lui donner une réponse correcte alors quand je suis rentré chez moi, je me suis préparé une bonne tasse de café et j'ai commencé à me plonger dans le sujet.

Malheureusement, 😱 j'ai été assez surpris de constater qu'il n'y en avait pas. beaucoup de ressources à ce sujet. Et en fait, 😅 la raison est simplement que vous n'avez rien à faire pour implémenter le fractionnement de code dans Nuxt.

Oui, Nuxt s'occupe de fractionner le code de votre application. Nuxt (avec l'aide de webpack) créera automatiquement un fichier JavaScript pour chaque page. Il prendra également en charge les dépendances du projet même si vous devrez parfois faire un travail supplémentaire (plus à ce sujet dans la troisième partie). En d'autres termes, chaque route récupérera son fichier JavaScript, avec juste le code (et les composants) requis pour faire fonctionner cette route.

Néanmoins, en lisant toutes les ressources sur lesquelles je pourrais mettre la main, j'ai appris tellement des choses. 👩🏽‍🎓 Cet article vise à résumer tout ce que j'ai appris pour vous aider à comprendre ce qui se passe derrière le rideau, donc la prochaine fois que quelqu'un vous demandera comment gérer le fractionnement de code dans Nuxt, vous aurez une réponse à donner. 🎭

1. Tout d'abord, qu'est-ce que le partage de code et pourquoi devriez-vous vous en soucier?

Le fractionnement de code est un terme que vous entendrez tout au long de votre vie de développeur. Si vous n'êtes pas familier avec cette pratique, 👩🏼‍🏫 laissez-moi la définir pour vous.

En un mot, cela signifie diviser votre code (le bundle que vous livrez au navigateur 🗃) en différents bundles plus petits (également connus sous le nom de morceaux 📂). En d'autres termes, c'est une technique que nous utilisons pour diviser notre code JavaScript en plusieurs fichiers.

💁🏼‍♀‍Vous pouvez jeter un œil au morceau chargé dans votre console Chrome avec l'onglet Réseau.

Pourquoi se donner la peine de faire ça? 🤔 Le but est de rendre l'application plus rapide et d'améliorer sa vitesse de chargement initiale (en particulier sur les appareils mobiles avec des réseaux lents). Étant donné que l'utilisateur n'a pas à télécharger tout le code en un seul coup, il pourra interagir avec la page plus tôt. 🏎

Croyez-moi, j'ai travaillé avec une application standard Vue.js dans laquelle je me suis rapidement retrouvé avec des centaines de composants et de pages. Si nous n'avions pas suivi cette pratique depuis le début, les performances auraient été dégradées 🤕 avec le temps.

Une autre grande chose avec le fractionnement de code est que lorsque vous modifiez une ligne dans votre code, le navigateur n'a pas à recharger votre forfait ENTIER. Au lieu de cela, il peut invalider et recharger uniquement les blocs 🎯 qui ont été modifiés.

2. Partage de code vs chargement paresseux

Il convient de mentionner la différence entre le fractionnement de code et le chargement paresseux, car vous verrez souvent ces deux termes dans le même contexte. Je n'ai pas pu faire la différence entre ces deux pratiques, alors pour éviter toute confusion, définissons-les.

Tout d'abord, les deux visent à atteindre le même objectif, qui accélère votre application.

Le partage de code est un processus qui consiste à diviser votre code en différents fichiers plus petits. Au lieu d'obtenir un seul gros paquet JavaScript, vous le diviserez en plusieurs fichiers (morceaux).

D'un autre côté, lorsque nous parlons de chargement paresseux, nous entendons différer une charge de quelque chose uniquement lorsque cela est nécessaire. . Un exemple typique auquel vous devrez peut-être faire face est le chargement paresseux d'images. Au lieu de les récupérer tous lorsque la page est rendue, nous les chargeons à des points d'arrêt logiques. Comme quand ils apparaissent près ou à l'intérieur de la fenêtre.

Remarque : Vous pouvez utiliser l'excellent package v-lazy-image : https://github.com/ alexjoverm / v-lazy-image pour charger vos images paresseux.

3. Que dois-je savoir sur le partage de code avec une application Nuxt.js?

🤹🏼‍♀‍Le processus

Comme nous l'avons dit précédemment, Nuxt, à travers sa configuration Webpack, s'occupe de la division du code de votre application. Néanmoins, il y a quelques choses que vous devez savoir, car vous pouvez personnaliser ce comportement par défaut.

Voici ce qui se passe derrière le rideau lorsque vous exécutez nuxt build 🏗:

1. Tout d'abord , il génère une version statique de votre application

2. Ensuite, il divise votre code JS en plusieurs fichiers en fonction de son système de routage par répertoire par défaut (créant des points de partage de code pour chaque route)

3. Pour le bundle de chaque page, il charge uniquement les composants, les dépendances, etc. dont vous avez besoin pour chaque page

4. Une autre chose à garder à l'esprit est qu'il pré-extrait les ensembles de pages qui sont liés à la page chargée via lorsqu'il apparaît dans la fenêtre d'affichage [19659030] Note ⚠️: Attention, le code généré en mode développement n'est pas optimisé pour la production. Certaines optimisations sont désactivées, car elles rendraient votre flux de travail moins performant (en recompilant des éléments inutiles). Pour avoir une idée précise de ce qui se passera précisément sur votre site Web de production, vous devez toujours analyser le comportement de votre version de production avec les commandes nuxt build et nuxt start .

   Of Bien sûr, si vous avez besoin de charger paresseusement un package tiers (par exemple, Moment.js) uniquement lorsque quelque chose de spécifique se produit (🙄 et vous n'en avez pas besoin pour toute votre application), vous devrez utiliser la fonction d'importation dynamique de webpack par vous-même.

    export default {
     méthodes: {
       async doSomething () {
         moment const = attendre l'importation ("moment");
         // ...
       }
     }
   };
   

   De plus, comme expliqué au point quatre, prélèvera la page à laquelle il est lié, lorsqu'elle apparaît dans la fenêtre d'affichage. Si vous souhaitez désactiver le comportement, définissez prefetchLinks sur false:

    // nuxt.config.js
   export par défaut {
     routeur: {
       prefetchLinks: false
     }
   };
   

   Je recommande de le laisser à true, car cela ne devrait pas avoir d'incidence sur le chargement initial de la page puisque la prélecture est effectuée pendant le temps d'inactivité. Une bonne règle de base est de rester avec la valeur par défaut à moins que vous ne sachiez ce que vous faites. Plus d'informations à ce sujet dans la documentation officielle . 👈🏽

   🦹🏼‍♀‍ Les choses ont changé depuis Nuxt 2

   ⏩ Ceci est un bref résumé de l'article de sortie officiel de Nuxt 2 .

   • Nuxt ne divise plus les morceaux de mise en page par défaut. Ils seront tous chargés le long du point d'entrée principal. Si vous souhaitez activer le fractionnement de disposition, définissez build.splitChunks.layouts sur true .

   • Pour les versions de production, les noms de fichier ne sont plus utilisés comme partie des noms de bloc ( /_nuxt/pages/foo/bar.[19459057</font>jsdevient[hash.js]). La raison principale de ce changement était d'éviter une fuite accidentelle des composants internes de votre projet. Vous pouvez forcer l'activation des noms à l'aide de build.optimization.splitChunks.name défini sur true .

   • Le bloc d'exécution (manifeste) n'est pas divisé par défaut par webpack pour réduire les demandes asynchrones et est déplacé dans le bloc principal. Vous pouvez activer le fractionnement d'exécution en définissant build.optimization.runtimeChunk sur true .

   4. BONUS 🌟: J'ai une application Vue.js standard. Comment puis-je implémenter le partage de code?

   Eh bien, ne vous inquiétez pas, ce n'est pas si difficile. 😇

   En bref, vous devrez vous fier à la fonction d'importation dynamique de Webpack pour diviser chaque groupe de composants dans leur propre fichier de construction. Il utilisera essentiellement Promise pour les charger de manière asynchrone.

   Dans cet ☝🏼 exemple, le code du composant popup ne sera téléchargé que lorsque visible est true . Le commentaire que vous voyez à l'intérieur de la fonction d'importation ( webpackChunkName: "popup" ) s'appelle un Magic comment et son but est de personnaliser le nom du morceau.

   J'ai énuméré les deux meilleurs articles que j'ai pu trouver sur le sujet ici 👇🏼:

   Conclusion

   Encore une fois, il est juste inutile de dire à quel point Nuxt est excellent et à quel point il enlève votre assiette. #SuperNuxt 🦸🏻‍♂‍

   Avec le partage de code prêt à l'emploi, il vous fait gagner beaucoup de temps tout en améliorant votre référencement (car Google pénalise les sites à chargement lent).

   N'hésitez pas à me dire dans les commentaires si vous avez quelque chose à ajouter à cet article, ou vous pouvez me contacter sur Twitter @RifkiNada . 🐦

   ---