Chargement différé et division du code
Divisez les ensembles de fichiers et chargez les composants et les itinéraires à la demande.
Chargement différé et division du code est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Pourquoi la taille du paquet est importante
Lorsque tout est envoyé dans un seul gros fichier JavaScript, les utilisateurs attendent plus longtemps avant de voir le premier écran. Le fractionnement du code divise votre application en blocs plus petits, chargés uniquement lorsque nécessaire, ce qui réduit le téléchargement initial et accélère le démarrage.
import() dynamique
L'outil essentiel est la fonction import() dynamique. Contrairement à un importation statique en haut d'un fichier, elle charge un module à la demande et renvoie une promesse. Les outils de regroupement placent chaque importation dynamique dans son propre bloc.
const module = await import("./heavyModule.js")
module.doSomething()Fractionnement du code par route
Le gain le plus important consiste à fractionner le code par route, afin que chaque page charge son propre code. Avec Vue Router, transmettez une fonction qui renvoie une importation dynamique au lieu d'importer directement le composant.
const routes = [
{
path: "/dashboard",
component: () => import("./views/Dashboard.vue")
}
]Routes statiques ou différées
Comparez les deux styles. L'importation statique regroupe le composant dans le bloc principal ; la version différée crée un bloc distinct, récupéré uniquement lorsque la route est visitée.
// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"
// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")defineAsyncComponent
Pour charger un composant de manière différée en dehors du routeur, encapsulez une importation dynamique avec defineAsyncComponent. Vue ne le charge que lors de son premier rendu.
import { defineAsyncComponent } from "vue"
const Chart = defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)Enregistrer des composants asynchrones
Enregistrez un composant asynchrone comme n'importe quel autre, puis utilisez-le dans votre modèle. Vue gère le chargement de manière transparente.
export default {
components: {
HeavyChart: defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)
}
}États de chargement et d'erreur
La forme avancée de defineAsyncComponent accepte des options permettant d'afficher un espace réservé pendant le chargement et une solution de repli en cas d'échec.
const Chart = defineAsyncComponent({
loader: () => import("./HeavyChart.vue"),
loadingComponent: Spinner,
errorComponent: LoadError,
delay: 200,
timeout: 5000
})Charger des composants volumineux à la demande
Les éléments volumineux ou rarement utilisés sont de bons candidats au chargement différé : graphiques, éditeurs de texte enrichi, cartes ou boîtes de dialogue modales que seuls certains utilisateurs ouvrent.
const RichEditor = defineAsyncComponent(() =>
import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shownChargement conditionnel avec v-if
Associez un composant asynchrone à v-if afin que son bloc ne soit récupéré que lorsque l'utilisateur le déclenche.
<template>
<button @click="showEditor = true">Edit</button>
<RichEditor v-if="showEditor" />
</template>Nommer les blocs pour le débogage
Les commentaires magiques de style Webpack donnent aux blocs des noms lisibles, ce qui facilite leur inspection dans l'onglet réseau et dans la sortie de génération.
const Reports = () => import(
/* webpackChunkName: "reports" */ "./views/Reports.vue"
)Mesurer l’impact
Après la division, vérifiez la sortie de compilation ou l’onglet réseau du navigateur. Vous devriez voir plusieurs fichiers de blocs plus petits au lieu d’un seul paquet volumineux, et le chargement initial devrait télécharger moins de code.
Vérification rapide
Testez vos connaissances sur le chargement différé.
Récapitulatif
La division du code avec import() dynamique réduit le paquet initial. Utilisez une importation renvoyée par une fonction pour les routes chargées à la demande et defineAsyncComponent pour les composants chargés à la demande, éventuellement avec des états de chargement et d’erreur. Chargez à la demande les éléments lourds ou rarement utilisés pour conserver un démarrage rapide. Vous allez maintenant mettre en cache les résultats et éviter le travail inutile grâce à la mémorisation.
Questions Fréquemment Posées
La leçon « Chargement différé et division du code » est-elle gratuite ?
Oui — le texte complet de « Chargement différé et division du code » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Chargement différé et division du code » ?
Divisez les ensembles de fichiers et chargez les composants et les itinéraires à la demande. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Chargement différé et division du code » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chargement différé et division du code
- Techniques de mémoïsation
- Identifier et corriger les goulots d’étranglement