Next.js 15 fullstack (App Router + Server Actions) · leksjon

Analyse av pakkestørrelse

Analyser og reduser JavaScript-pakkestørrelsen i applikasjonen for raskere innlasting av sider og bedre ytelse.

Leksjon 2 av 411 trinn

Analyse av pakkestørrelse er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Hva er en JavaScript-bundle?

Når De bygger en Next.js-applikasjon for produksjon, blir all JavaScript-koden – komponentene, bibliotekene og selve Next.js – kombinert og optimalisert til én eller flere filer som kalles «bundler».

Det er disse bundlene nettleseren til brukeren laster ned for å kjøre applikasjonen.

Påvirkning på ytelsen

Jo større JavaScript-bundlene er, desto lengre tid tar det for nettleseren til brukeren å laste dem ned, analysere dem og kjøre dem.

Lengre innlastingstid: Brukerne må vente lenger før appen blir interaktiv.
Høyere databruk: Særlig viktig for mobilbrukere med begrensede datapakker.
Dårligere brukeropplevelse: Kan føre til frustrasjon og at brukere forlater nettstedet.

Analysere byggresultatet

Next.js gir nyttig informasjon når De kjører next build. Den viser størrelsen på hver sides JavaScript-bundle.

For å få et grundigere innblikk i hva disse bundlene inneholder, trenger De spesialiserte verktøy.

next build

Visualisere bundler med Analyzer

Pakken @next/bundle-analyzer er et kraftig verktøy. Den oppretter en interaktiv treemap-visualisering av bundlene.

Dette visuelle kartet gjør det enklere å raskt identifisere store moduler eller tredjepartsbiblioteker som bidrar betydelig til bundle-størrelsen.

Konfigurere Analyzer

Installer først pakken:

npm install --save-dev @next/bundle-analyzer

Oppdater deretter next.config.js for å aktivere den betinget:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
});

module.exports = withBundleAnalyzer({});

Generere bundlerapporten

For å generere rapporten må De angi miljøvariabelen ANALYZE og deretter kjøre Next.js-byggkommandoen.

Dette oppretter HTML-filer i mappen .next/analyze som De kan åpne i nettleseren.

ANALYZE=true npm run build

Hva gjør bundler store?

Flere faktorer kan føre til en for stor bundle:

Store biblioteker: Hele bibliotek importeres selv om De bare bruker en liten del.
Duplisert kode: Ulike deler av appen importerer den samme modulen.
Ubrukt kode: Kode som er inkludert, men aldri kjøres (død kode).
Tunge ressurser: Inline-SVG eller base64-bilder direkte i JS-filer.

Dele opp kode for bedre effektivitet

Kodedeling er en teknikk som deler koden opp i mindre «chunks» som kan lastes inn ved behov. Next.js gjør dette automatisk for sider.

For komponenter på en side kan De bruke dynamisk import for å laste dem inn bare når det er nødvendig, slik at den innledende bundle-størrelsen reduseres.

Laste inn komponenter lazy

Bruk next/dynamic til å importere komponenter først når de gjengis. Dette passer perfekt for komponenter som ikke er kritiske ved den innledende sidelastingen, for eksempel modaler eller administrasjonspaneler.

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LazyComponent />
    </div>
  );
}

Kort sjekk: Optimalisering av bundler

Se for Dem en Next.js-applikasjon som har vokst betydelig. Hvilke av følgende strategier er effektive for å redusere den innledende JavaScript-bundle-størrelsen?

Besvar den i den interaktive leksjonen

Oppsummering av bundle-optimalisering

Godt jobbet! De har lært hvordan De kan analysere JavaScript-bundle-størrelsen i Next.js-applikasjonen og implementere viktige optimaliseringsteknikker.

Bruk @next/bundle-analyzer til å visualisere bundlene.
Implementer dynamisk import for ikke-kritiske komponenter.
Vær oppmerksom på store tredjepartsbiblioteker, og sørg for at tree-shaking fungerer effektivt.

Optimalisering av bundle-størrelsen er avgjørende for å levere en rask og responsiv brukeropplevelse.

Gratis å komme i gang

Lær deg TypeScript 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: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Analyse av pakkestørrelse» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Analyse av pakkestørrelse», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Analyse av pakkestørrelse»?

Analyser og reduser JavaScript-pakkestørrelsen i applikasjonen for raskere innlasting av sider og bedre ytelse. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 «Analyse av pakkestørrelse»?

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 Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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

Optimalisering av bilder og skrifter
Analyse av pakkestørrelse
Avanserte hurtigbufferstrategier
Strømmende UI med Suspense og lastetilstander

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)