Analyse af bundles og strategi for kodedeling
Analysér bundle-størrelsen med rollup-plugin-visualizer, og fastlæg en strategi for kodedeling pr. route.
Analyse af bundles og strategi for kodedeling er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.
Hvorfor pakkestørrelsen er vigtig
Store JavaScript-bundter forsinker tiden til interaktivitet. Hver KB JavaScript skal downloades, fortolkes og udføres, før siden bliver interaktiv — især på langsomme mobilnetværk.
Analyse med rollup-plugin-visualizer
I Vite-projekter kan du bruge visualizer-pluginet til at generere et trædiagram over dit bundt, som viser, hvilke moduler der fylder mest.
// 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 treemapNext.js Bundle Analyzer
Brug @next/bundle-analyzer til at analysere server- og klientbundter i 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 buildRuteopdelt kode
Den mest effektive opdeling er at indlæse hver rutes kode, først når brugeren navigerer til den. React Router med lazy() og Next.js App Router gør dette automatisk.
// 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>Komponentopdelt kode
Udskyd indlæsningen af tunge komponenter som kort, diagrammer og editorer, indtil der er brug for dem, ved hjælp af 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>}
</>
);
}Dynamisk import af betingede funktioner
Importér kun store biblioteker, når en funktion aktiveres, så de ikke indlæses for alle brugere.
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');
}Tree shaking
Moderne bundtere fjerner ubrugte eksporter (død kode). Sørg for, at dine afhængigheder understøtter ESM og ikke CJS, for at tree shaking kan fungere, og undgå at importere hele biblioteker, når du kun bruger én funktion.
// 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';Forudindlæsning af kritiske dele
Brug <link rel='modulepreload'> eller Webpacks særlige kommentarer til at forudindlæse den næste sides del, mens brugeren er på den aktuelle side.
// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));Analyse af tredjepartspåvirkning
Brug bundlephobia.com eller Import Cost-udvidelsen til VS Code til at se den gzip-komprimerede størrelse af en npm-pakke, før du installerer den.
Indstilling af et pakkebudget
Angiv en størrelsesgrænse pr. rute i Webpack- eller Vite-konfigurationen. Bygningen mislykkes, hvis en del overskrider budgettet, så utilsigtede størrelsesforøgelser opdages i CI.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom'],
'vendor-router': ['react-router-dom'],
},
},
},
chunkSizeWarningLimit: 200, // warn at 200KB
},Hurtigt tjek
Hvilken kodeopdelingsstrategi har størst effekt for React-SPA'er med mange sider?
Opsummering
Analysér bundter med rollup-plugin-visualizer eller @next/bundle-analyzer. Brug ruteopdelte og komponentopdelte lazy()-dele. Anvend tree shaking ved kun at importere det, du bruger. Angiv størrelsesbudgetter i CI, og brug tip om forhåndshentning og forudindlæsning til den næste sandsynlige rute.
Lær React med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 88
- Lektioner
- 324
Ofte stillede spørgsmål
Er lektionen “Analyse af bundles og strategi for kodedeling” gratis?
Ja — hele teksten til “Analyse af bundles og strategi for kodedeling” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Analyse af bundles og strategi for kodedeling”?
Analysér bundle-størrelsen med rollup-plugin-visualizer, og fastlæg en strategi for kodedeling pr. route. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Academy?
Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Analyse af bundles og strategi for kodedeling”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Academy-lektion?
Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Måling af Core Web Vitals i React-apps
- Analyse af bundles og strategi for kodedeling
- Billed- og fontoptimering i React
- Reduktion af INP: optimering af event handlers