Mesurer le chargement différé

Dans code/ch9/exercices/ex10-differe/src/router.js :


// Chargée seulement à la première visite d'une fiche.
const PageLivre = () => import("./pages/PageLivre.vue");

vite build, avant :


vite v8.3.2 building client environment for production...
transforming...
✓ 28 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.38 kB │ gzip:  0.27 kB
dist/assets/index-DEF8QhlL.css   0.21 kB │ gzip:  0.17 kB
dist/assets/index-nv2yz968.js   86.86 kB │ gzip: 33.75 kB

✓ built in 59ms

et après :


vite v8.3.2 building client environment for production...
transforming...
✓ 29 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                     0.38 kB │ gzip:  0.27 kB
dist/assets/index-DEF8QhlL.css      0.21 kB │ gzip:  0.17 kB
dist/assets/PageLivre-BiTlADNj.js   0.64 kB │ gzip:  0.43 kB
dist/assets/index-DFpQXEJa.js      87.87 kB │ gzip: 34.23 kB

✓ built in 63ms

Requêtes de fichiers JavaScript relevées dans Chromium :


après /livres : /assets/index-DFpQXEJa.js
après le clic : /assets/index-DFpQXEJa.js, /assets/PageLivre-BiTlADNj.js

La fiche part bien dans son propre fichier, téléchargé au premier clic seulement. Mais elle ne pèse que 0,64 ko, et le fichier principal a grossi d'environ 1 ko : il contient maintenant le code qui charge les morceaux à la demande. Pour une page aussi petite, le découpage coûte plus qu'il ne rapporte, et ajoute une requête au moment du clic. Il se justifie pour une page lourde ou rarement visitée.

Énoncé

Corrigé