PricingLoginStart free
Next.js 15 for fullstack-webapper · leksjon

Pakkeanalyse og ytelsesrevisjoner

Analyser størrelsen på applikasjonens pakke, og gjennomfør revisjoner for å finne og løse ytelsesflaskehalser.

Leksjon 3 av 411 trinn

Pakkeanalyse og ytelsesrevisjoner er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 3 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 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Øk appens hastighet med analyser

Velkommen til bundle-analyse og ytelsesrevisjoner! I moderne webutvikling er hastighet avgjørende. Brukerne forventer korte lastetider, og søkemotorer belønner nettsteder med god ytelse.

I denne leksjonen får du verktøyene og teknikkene du trenger for å forstå hva som skjer i Next.js-applikasjonen din, finne flaskehalser og til slutt gjøre den raskere.

Hva er en bundle? Hvorfor bry seg?

Når du bygger en Next.js-applikasjon for produksjon, behandles all koden din (JavaScript, CSS og ressurser) og slås sammen til én eller flere filer som kalles bundler.

  • Raskere lasting: Mindre bundler lastes ned raskere.
  • Bedre brukeropplevelse: Et raskt nettsted betyr mer fornøyde brukere.
  • Bedre SEO: Søkemotorer favoriserer nettsteder med god ytelse.
  • Lavere kostnader: Mindre dataoverføring kan gi lavere kostnader for hosting.

Bli kjent med Next.js Bundle Analyzer

@next/bundle-analyzer er et viktig verktøy som hjelper deg med å visualisere innholdet i produksjonsbundlene til Next.js. Det oppretter et interaktivt trekart som viser nøyaktig hvilke moduler og avhengigheter som bidrar til den totale størrelsen på appen.

Denne visuelle rapporten gjør det enkelt å oppdage store biblioteker eller duplisert kode som kan gjøre applikasjonen tregere.

Konfigurere Bundle Analyzer: Installere

Først må du installere pakken som en utviklingsavhengighet i Next.js-prosjektet ditt. Åpne terminalen i rotmappen til prosjektet, og kjør:

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

Konfigurere Bundle Analyzer: Konfigurere

Deretter oppdaterer du filen next.config.js for å aktivere analysatoren. Dette forteller Next.js at det skal genereres bundle-rapporter når du bygger applikasjonen.

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

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withBundleAnalyzer(nextConfig);

Kjøre analysatoren

Nå som den er konfigurert, kan du generere bundle-rapporten. Vanligvis gjør du dette ved å angi en miljøvariabel før du kjører byggekommandoen:

Når byggingen er fullført, genereres rapportene (for eksempel .next/analyze/client.html). Deretter kan du åpne dem i nettleseren for å utforske dem.

ANALYZE=true npm run build

Tolke rapporten

Rapporten fra bundle-analysatoren er et interaktivt trekart. Her er det du bør se etter:

  • Store rektangler: Indikerer store moduler eller biblioteker.
  • Røde/gule områder: Fremhever ofte områder som bidrar betydelig til størrelsen på bundlen.
  • Duplikater: Noen ganger kan ulike versjoner av det samme biblioteket bli inkludert i bundlen.
  • Ubrukt kode: Kan hjelpe deg med å identifisere avhengigheter du kanskje ikke trenger.

Hold markøren over delene for å se filstørrelser og filbaner.

Vanlige optimaliseringsstrategier

Når du har identifisert store deler av bundlen, kan du optimalisere på følgende vanlige måter:

  • Dynamiske importer (kodedeling): Last inn komponenter eller biblioteker bare når de trengs.
  • Tree shaking: Sørg for at ubrukt kode fra importerte moduler fjernes.
  • Gzip-/Brotli-komprimering: Komprimering på serversiden reduserer størrelsen på filer som overføres.
  • Fjern ubrukte biblioteker: Gå gjennom avhengighetene dine, og fjern dem som ikke er i bruk.
  • Optimaliser bilder: Bruk next/image og passende formater.

Ytelsesmålinger med Lighthouse

I tillegg til bundlestørrelsen er Google Lighthouse et kraftig verktøy som er innebygd i Chrome DevTools, og som utfører en omfattende analyse av nettsiden din. Det kontrollerer:

  • Ytelse: Målinger som First Contentful Paint og Largest Contentful Paint.
  • Tilgjengelighet: Hvor brukervennlig appen din er for alle.
  • Beste praksis: Generelle nettstandarder.
  • SEO: Faktorer innen søkemotoroptimalisering.

Kjør det på produksjonsbygget for å få konkrete forbedringsforslag.

Test kunnskapen din

Hvilke av følgende er effektive strategier for å redusere bundlestørrelsen til Next.js-applikasjonen din eller forbedre ytelsen?

Besvar den i den interaktive leksjonen

Oppsummering og neste steg

Godt jobbet! Du har lært hvordan du analyserer og optimaliserer ytelsen til Next.js-applikasjonen din:

  • Vi undersøkte hva en bundle er, og hvorfor størrelsen betyr noe.
  • Du lærte å konfigurere og tolke rapporter fra @next/bundle-analyzer.
  • Vi gikk gjennom viktige optimaliseringsteknikker som dynamiske importer og tree shaking.
  • Til slutt introduserte vi Google Lighthouse for omfattende ytelsesmålinger.

Ha disse verktøyene i verktøykassen når du skal bygge raskere og mer effektive Next.js-applikasjoner.

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
12
Leksjoner
48
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Pakkeanalyse og ytelsesrevisjoner» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Pakkeanalyse og ytelsesrevisjoner», 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 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Pakkeanalyse og ytelsesrevisjoner»?

Analyser størrelsen på applikasjonens pakke, og gjennomfør revisjoner for å finne og løse ytelsesflaskehalser. Du øver på Next.js 15 for fullstack-webapper 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 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper 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 3 av 4.

Hvor lang tid tar leksjonen «Pakkeanalyse og ytelsesrevisjoner»?

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 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-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

  1. Distribusjon til Vercel og Netlify
  2. Optimalisering av bilder og skrifttyper
  3. Pakkeanalyse og ytelsesrevisjoner
  4. Core Web Vitals og overvåking
← Tilbake til Next.js 15 for fullstack-webapper