Division du code et routes chargées à la demande
Utilisez import() dynamique pour diviser le bundle aux frontières des routes, chargez les composants React et Vue à la demande et surveillez la taille des fragments dans la sortie de compilation.
Division du code et routes chargées à la demande est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi fractionner le code ?
Un paquet JavaScript monolithique oblige chaque visiteur à télécharger chaque ligne de code de votre application, y compris les fonctionnalités qu'il n'utilisera jamais. Le fractionnement du code divise le paquet en blocs chargés à la demande.
import() dynamique
import('./module') renvoie une promesse qui se résout en module. Les outils de regroupement (Vite, webpack) détectent cela et produisent un bloc distinct chargé à l'exécution.
// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';
// With split — loaded only when needed:
button.addEventListener('click', async () => {
const { generateChart } = await import('heavy-chart-lib');
generateChart(data);
});React.lazy() — Fractionnement au niveau des composants
React.lazy(() => import('./Heavy')) crée un composant qui ne charge son code que lors de son premier rendu. Entourez-le de <Suspense> pour afficher une solution de repli pendant le chargement.
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>
);
}Fractionnement par route dans React Router
Chaque route possède son propre bloc : les utilisateurs ne téléchargent que le code des pages qu'ils consultent.
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin = lazy(() => import('./pages/Admin'));
const router = createBrowserRouter([
{ path: '/', element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
{ path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
{ path: '/admin', element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);Composants asynchrones de Vue 3
Vue propose defineAsyncComponent pour appliquer le même modèle.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(() =>
import('./Dashboard.vue')
);
// Use in template like a normal componentRoutes chargées à la demande avec Vue Router
Vue Router prend en charge les importations dynamiques dans les définitions de routes : un bloc est produit pour chaque route.
const routes = [
{ path: '/', component: () => import('./pages/Home.vue') },
{ path: '/profile', component: () => import('./pages/Profile.vue') },
{ path: '/admin', component: () => import('./pages/Admin.vue') }
];Commentaires magiques de webpack
Indiquez les noms des blocs et le comportement de préchargement anticipé à l'aide des « commentaires magiques » de webpack placés dans l'instruction d'importation.
const Profile = lazy(() =>
import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);
// Vite supports a subset; @vite-ignore for special casesPréchargement anticipé ou prioritaire
préchargement anticipé : téléchargez le bloc pendant les périodes d'inactivité pour les navigations probablement imminentes. préchargement prioritaire : téléchargez-le immédiatement avec une priorité élevée pour les blocs critiques de la route actuelle. Utilisez le préchargement anticipé au survol d'un lien et le préchargement prioritaire pour les besoins imminents connus.
Analyseur de paquets
Utilisez rollup-plugin-visualizer (Vite) ou webpack-bundle-analyzer pour visualiser la taille des blocs. Recherchez les blocs surdimensionnés, les dépendances dupliquées et les bibliothèques que vous avez oublié d'éliminer lors de la suppression des dépendances inutilisées.
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
export default {
plugins: [visualizer({ open: true, gzipSize: true })]
};Fractionnement du bloc des dépendances tierces
Placez les bibliothèques tierces dans un bloc distinct de dépendances externes, qui change moins souvent que le code de votre application : les navigateurs peuvent le conserver en cache entre les déploiements.
// vite.config.ts
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom'],
ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
}
}
}
}
};Quand ne pas fractionner (NOT)
Les blocs minuscules (moins de 20 Ko) nuisent plus qu'ils n'aident : le surcoût HTTP dépasse les économies réalisées sur le paquet. Ne fractionnez pas chaque composant ; fractionnez aux limites des routes et autour des fonctionnalités réellement lourdes.
Vérification rapide
À quoi le conteneur lazy() de React doit-il être associé pour effectuer correctement le rendu ?
Récapitulatif : fractionnement du code
Les appels à import() dynamique produisent des blocs distincts. Utilisez React.lazy et Suspense pour le fractionnement des composants. Utilisez des composants de route chargés à la demande dans React Router ou Vue Router. Utilisez le préchargement anticipé pour les blocs probablement nécessaires ensuite et le préchargement prioritaire pour les blocs critiques. L'analyseur de paquets révèle les éléments superflus. Fractionnez les bibliothèques tierces pour améliorer la conservation en cache. Évitez les micro-blocs de moins de 20 Ko.
Questions Fréquemment Posées
La leçon « Division du code et routes chargées à la demande » est-elle gratuite ?
Oui — le texte complet de « Division du code et routes chargées à la demande » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Division du code et routes chargées à la demande » ?
Utilisez import() dynamique pour diviser le bundle aux frontières des routes, chargez les composants React et Vue à la demande et surveillez la taille des fragments dans la sortie de compilation. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.
Combien de temps prend la leçon « Division du code et routes chargées à la demande » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Signaux essentiels du Web : LCP, FID et CLS
- Audits et évaluation avec Lighthouse
- Optimisation des images : chargement différé et formats WebP
- Division du code et routes chargées à la demande