Comment utiliser le fractionnement de code Webpack avec Vue.js

photo de pabloheimplatz

Je travaille avec Vue.js depuis 8 mois et mon équipe et moi avons utilisé différentes techniques d'optimisation des performances pour améliorer l'expérience utilisateur. Il est temps de partager!

Remarque: vous pouvez lire l'article sans faire le didacticiel. Vous pouvez voir le code ici.

Nous utiliserons un projet simple généré avec vue-cli avec le modèle de webpack avec seulement deux routes (Hello et Goodbye):

clone de git https://github.com/PierreCavalet/vuejs-code-splitting.git
npm installer

Nous allons parler des outils de construction, vous aurez donc besoin d’un serveur http pour traiter les fichiers statiques. Je vais utiliser http-server mais vous pouvez en utiliser un autre si vous préférez.

npm install -g serveur http

Lorsque vous construisez une grande application, le paquet Javascript peut devenir assez volumineux. Cela aura un impact direct sur l'expérience utilisateur car le temps de chargement augmentera en conséquence.

Premièrement, nous devons comprendre comment une application est construite pour la production.

npm run build

Cette commande produit les fichiers qui sont servis sur un serveur HTTP. Voici la structure:

.
├── index.HASH.html
├── statique /
└── css /
│ └── app.HASH.css
│ └── app.HASH.css.map
└── js /
│ └── app.HASH.js
│ └── app.HASH.js.map
│ └── manifest.HASH.js
│ └── manifest.HASH.js.map
│ └── vendor.HASH.js
│ └── vendor.HASH.js.map

Le bundle app.HASH.js contient le code de l'application (sans les librairies externes, qui sont dans vendor.HASH.js).

Nous utiliserons http-server pour servir ces fichiers.

serveur http dist /

Par défaut, le serveur http s'exécute sur le port 8080. Vous devriez pouvoir voir votre application construite pour la production ici.

J'utilise le chrome, mais vous pouvez effectuer les opérations suivantes avec presque tous les navigateurs. À partir des outils de développement de chrome, vous pouvez voir le trafic réseau:

Le fichier index.html contient des balises de script et de lien qui indiquent au navigateur de télécharger les fichiers js et css ci-dessus.

La division de code vous permet de créer des morceaux qui ne sont pas regroupés dans app.HASH.js. Au lieu de cela, ces morceaux sont chargés de manière asynchrone quand ils sont requis. Cette technique est utile lorsque votre application devient trop volumineuse pour être servie en tant que fichier unique ou lorsque vous avez beaucoup de contenu qui ne sera probablement pas utilisé par vos utilisateurs.

Revenons à notre exemple. Supposons que notre composant Goodbye est génial et que nous devons le séparer.

Webpack fournit une fonctionnalité de fractionnement de code qui vous permet de créer des fragments qui peuvent ensuite être chargés à la demande. Nous utiliserons:

  • la fonctionnalité d'importation dynamique Webpack permettant de scinder le code en son propre tronçon
  • la fonctionnalité Composants asynchrones pour charger le composant de manière asynchrone

Changez votre src / router / index.js avec ce nouveau contenu.

Et c'est tout. Au lieu d'utiliser une importation standard, nous définissons Goodbye avec une fonction de flèche qui renvoie une promesse (l'importation renvoie une promesse). Voyons maintenant la différence avec l’application conçue pour la production.

Tout d’abord, supprimez l’ancienne version:

rm -rf dist / *

Reconstruisez ensuite l'application:

npm run build

Notez qu'il y a un nouveau fichier Javascript dans la sortie:

.
├── index.HASH.html
├── statique /
└── css
│ └── app.HASH.css
│ └── app.HASH.css.map
└── js
│ └── app.HASH.js
│ └── app.HASH.js.map
│ └── 0.HASH.js
│ └── 0.HASH.js.map
│ └── manifest.HASH.js
│ └── manifest.HASH.js.map
│ └── vendor.HASH.js
│ └── vendor.HASH.js.map

0.HASH.js est le bloc qui contient le composant au revoir.

Chargez l'application et comparez le réseau.

Lorsque vous chargez l'application, vous pouvez voir ce réseau:

Tout d'abord, nous pouvons noter que l'application est légèrement plus légère (-0,5 ko) car elle ne contient pas le composant Au revoir. Maintenant, si nous cliquons sur le lien au revoir, voici le réseau:

Le morceau est chargé de manière asynchrone. Voici comment fonctionne le fractionnement de code.

Au fur et à mesure que votre application grandit, vous aurez de plus en plus de composants asynchrones. Imaginez que vous ayez un processus qui utilise 2 routes, la route / foo et la route / bar. Vous pouvez grouper les 2 morceaux dans le même morceau en utilisant le morceau nommé. Essayons ça.

Nous devons d’abord configurer votre projet avec davantage de composants asynchrones:

git stash
git checkout plusieurs-composants asynchrones

Remarque: si vous ne suivez pas réellement le didacticiel, vous pouvez vérifier le code source sur github.

Supprimez l'ancienne version et reconstruisez l'application:

rm -rf dist / *
npm run build

Comme vous pouvez le voir, il y a 3 morceaux (0, 1, 2).

Nous allons maintenant utiliser un paramètre spécial pour webpack: webpackChunkName.

Changez votre src / router / index.js avec ce nouveau contenu.

Maintenant, si vous reconstruisez votre application, vous pouvez voir qu'il n'y a que deux morceaux:

  • Un avec le composant Au revoir
  • Un avec le composant Foo et la barre

Si vous souhaitez plus d'informations sur le sujet, vous pouvez consulter la documentation officielle.