Analyse du bundle et stratégie de séparation du code
Analysez la taille du bundle avec rollup-plugin-visualizer et définissez une stratégie de séparation du code par route.
Analyse du bundle et stratégie de séparation du code est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Pourquoi la taille des paquets est importante
Les gros paquets JavaScript retardent le temps avant interactivité. Chaque KB de JS doit être téléchargé, analysé puis exécuté avant que la page devienne interactive — en particulier sur les réseaux mobiles lents.
Analyse avec rollup-plugin-visualizer
Dans les projets Vite, utilisez le module de visualisation pour générer une carte en arborescence de votre paquet et voir quels modules occupent le plus d’espace.
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({ open: true, gzipSize: true, brotliSize: true })
],
});
// After build, open the generated HTML file to explore the treemapAnalyseur de paquets de Next.js
Utilisez @next/bundle-analyzer pour analyser les paquets serveur et client dans Next.js.
npm install @next/bundle-analyzer
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
// Run:
// ANALYZE=true npm run buildDécoupage du code par route
Le découpage le plus efficace consiste à charger le code de chaque route uniquement lorsque l’utilisateur y accède. React Router avec lazy() et l’App Router de Next.js le font automatiquement.
// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
<Routes>
<Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
<Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>Découpage du code au niveau des composants
Différez le chargement des composants lourds (cartes, graphiques, éditeurs) jusqu’à ce qu’ils soient nécessaires, en utilisant lazy().
const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));
function ProductEditor({ showMap }) {
return (
<>
<Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
{showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
</>
);
}Importation dynamique des fonctionnalités conditionnelles
Importez les bibliothèques volumineuses uniquement lorsqu’une fonctionnalité est activée, afin d’éviter de les charger pour tous les utilisateurs.
async function exportToPDF() {
const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
const doc = new jsPDF();
doc.text('Hello', 10, 10);
doc.save('export.pdf');
}Élimination du code mort
Les outils modernes de regroupement éliminent les exports inutilisés (code mort). Assurez-vous que vos dépendances prennent en charge ESM (et non CJS) pour que cette élimination fonctionne, et évitez d’importer des bibliothèques entières lorsque vous n’utilisez qu’une seule fonction.
// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);
// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';Préchargement des paquets critiques
Utilisez <link rel='modulepreload'> ou les commentaires magiques de Webpack pour précharger le chunk de la page suivante pendant que l’utilisateur se trouve sur la page actuelle.
// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));Analyser l’impact des dépendances tierces
Utilisez bundlephobia.com ou l’extension Import Cost de VS Code pour connaître la taille gzippée de tout package npm avant de l’installer.
Définir un budget de taille pour les paquets
Définissez une limite de taille par route dans la configuration de Webpack ou de Vite. La compilation échoue si un chunk dépasse le budget, ce qui permet de détecter les régressions accidentelles de taille dans la CI.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom'],
'vendor-router': ['react-router-dom'],
},
},
},
chunkSizeWarningLimit: 200, // warn at 200KB
},Vérification rapide
Quelle est la stratégie de découpage du code la plus efficace pour les applications React monopages comportant de nombreuses pages ?
Récapitulatif
Analysez les paquets avec rollup-plugin-visualizer ou @next/bundle-analyzer. Utilisez le découpage par route et au niveau des composants avec lazy(). Appliquez l’élimination du code mort en important uniquement ce que vous utilisez. Définissez des budgets de taille dans la CI et utilisez des indications de prélecture et de préchargement pour la prochaine route probable.
Questions Fréquemment Posées
La leçon « Analyse du bundle et stratégie de séparation du code » est-elle gratuite ?
Oui — le texte complet de « Analyse du bundle et stratégie de séparation 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Analyse du bundle et stratégie de séparation du code » ?
Analysez la taille du bundle avec rollup-plugin-visualizer et définissez une stratégie de séparation du code par route. Tu pratiques React 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 React Academy ?
Aucune expérience préalable n'est requise. React 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 2 sur 4.
Combien de temps prend la leçon « Analyse du bundle et stratégie de séparation 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 React Academy ?
Oui. Chaque leçon React 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
- Mesurer les indicateurs Web essentiels dans les applications React
- Analyse du bundle et stratégie de séparation du code
- Optimisation des images et des polices dans React
- Réduire l’INP : optimisation des gestionnaires d’événements