Buntanalyse og strategi for kodedeling
Analyser buntstørrelsen med rollup-plugin-visualizer, og lag en strategi for kodedeling per rute.
Buntanalyse og strategi for kodedeling er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.
Hvorfor buntstørrelse er viktig
Store JavaScript-bunter forsinker Time To Interactive. Hver KB med JavaScript må lastes ned, parses og kjøres før siden blir interaktiv – spesielt på langsomme mobilnettverk.
Analyse med rollup-plugin-visualizer
I Vite-prosjekter kan du bruke visualizer-pluginen til å generere et trekart over bunten, slik at du ser hvilke moduler som tar mest plass.
// 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
Bruk @next/bundle-analyzer til å analysere server- og klientbunter 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 buildRute-basert kodedeling
Den mest effektive formen for kodedeling er å laste inn koden for hver rute først når brukeren navigerer til den. React Router med lazy() og Next.js App Router gjø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>Komponentnivåbasert kodedeling
Utsett innlasting av tunge komponenter (kart, diagrammer og redigeringsverktøy) til de trengs, ved å bruke 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 av funksjoner ved behov
Importer store biblioteker først når en funksjon aktiveres, slik at de ikke lastes inn for alle brukere.
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 bundlere fjerner ubrukte eksporter (død kode). Sørg for at avhengighetene støtter ESM (ikke CJS) for at tree shaking skal fungere, og unngå å importere hele biblioteker når du bare bruker én funksjon.
// 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';Forhåndslasting av kritiske biter
Bruk <link rel='modulepreload'> eller Webpack magic comments til å forhåndslaste biten for neste side mens brukeren er på den gjeldende siden.
// 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 av tredjepartspåvirkning
Bruk bundlephobia.com eller Import Cost-utvidelsen for VS Code for å se den gzippede størrelsen på en npm-pakke før du installerer den.
Angi et buntbudsjett
Angi en størrelsesgrense per rute i Webpack- eller Vite-konfigurasjonen. Byggingen mislykkes hvis en bit overskrider budsjettet, slik at utilsiktede størrelsesøkninger oppdages i CI.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom'],
'vendor-router': ['react-router-dom'],
},
},
},
chunkSizeWarningLimit: 200, // warn at 200KB
},Kort sjekk
Hva er den mest effektive strategien for kodedeling i React-SPA-er med mange sider?
Oppsummering
Analyser bunter med rollup-plugin-visualizer eller @next/bundle-analyzer. Bruk rute- og komponentnivåbasert kodedeling med lazy(). Benytt tree shaking ved å importere bare det du bruker. Angi størrelsesbudsjetter i CI, og bruk hint for forhåndshenting og forhåndslasting av den neste sannsynlige ruten.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Buntanalyse og strategi for kodedeling» gratis?
Ja – hele teksten i «Buntanalyse og strategi for kodedeling» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Buntanalyse og strategi for kodedeling»?
Analyser buntstørrelsen med rollup-plugin-visualizer, og lag en strategi for kodedeling per rute. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Buntanalyse og strategi for kodedeling»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Måle Core Web Vitals i React-apper
- Buntanalyse og strategi for kodedeling
- Optimalisering av bilder og skrifter i React
- Redusere INP: optimalisering av event handlers