Bundleanalyse og performance audits
Analysér Deres applikations bundle-størrelse, og udfør audits for at identificere og afhjælpe flaskehalse i ydeevnen.
Bundleanalyse og performance audits er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Gør din app hurtigere med analyser
Velkommen til bundle-analyse og ydeevneauditering! I moderne webudvikling er hastighed afgørende. Brugere forventer hurtige indlæsningstider, og søgemaskiner belønner websteder med god ydeevne.
Denne lektion giver dig værktøjer og teknikker til at forstå, hvad der får din Next.js-applikation til at fungere, identificere flaskehalse og i sidste ende gøre den hurtigere.
Hvad er en bundle, og hvorfor er den vigtig?
Når du bygger en Next.js-applikation til produktion, behandles og kombineres al din kode (JavaScript, CSS og aktiver) i én eller flere filer, der kaldes bundles.
- Hurtigere indlæsning: Mindre bundles downloades hurtigere.
- Bedre brugeroplevelse: Et hurtigt websted betyder gladere brugere.
- Bedre SEO: Søgemaskiner foretrækker websteder med god ydeevne.
- Lavere omkostninger: Mindre overførte datamængder kan betyde lavere hostingomkostninger.
Mød Next.js Bundle Analyzer
@next/bundle-analyzer er et vigtigt værktøj, der hjælper dig med at visualisere indholdet af dine Next.js-bundles til produktion. Det opretter et interaktivt trækort, som viser præcis, hvilke moduler og afhængigheder der bidrager til din apps samlede størrelse.
Denne visuelle rapport gør det nemt at finde store biblioteker eller duplikeret kode, som måske gør din applikation langsommere.
Opsætning af Bundle Analyzer: Installation
Først skal du installere pakken som en udviklingsafhængighed i dit Next.js-projekt. Åbn din terminal i projektets rodmappe, og kør:
npm install --save-dev @next/bundle-analyzerOpsætning af Bundle Analyzer: Konfiguration
Derefter opdaterer du filen next.config.js for at aktivere analysatoren. Det fortæller Next.js, at der skal genereres bundle-rapporter, når du bygger din applikation.
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
openAnalyzer: false,
});
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withBundleAnalyzer(nextConfig);Kørsel af analysatoren
Nu hvor den er konfigureret, kan du generere bundlerapporten. Typisk gør du det ved at angive en miljøvariabel, før du kører din build-kommando:
Når buildet er færdigt, bliver rapporterne (f.eks. .next/analyze/client.html) genereret. Derefter kan du åbne dem i din browser og udforske dem.
ANALYZE=true npm run buildFortolkning af rapporten
Bundleanalysatorens rapport er et interaktivt treemap. Her er, hvad du skal kigge efter:
- Store rektangler: Angiver store moduler eller biblioteker.
- Røde/gule områder: Fremhæver ofte områder, der bidrager betydeligt til bundlestørrelsen.
- Dubletter: Nogle gange kan forskellige versioner af det samme bibliotek blive inkluderet i bundlet.
- Ubrugt kode: Kan hjælpe dig med at identificere afhængigheder, du måske ikke har brug for.
Hold markøren over sektionerne for at se filstørrelser og stier.
Almindelige optimeringsstrategier
Når du har identificeret store dele af dit bundle, er her nogle almindelige måder at optimere det på:
- Dynamiske imports (kodedeling): Indlæs kun komponenter eller biblioteker, når der er brug for dem.
- Tree shaking: Sørg for, at ubrugt kode fra importerede moduler fjernes.
- Gzip-/Brotli-komprimering: Komprimering på serversiden reducerer størrelsen på de filer, der overføres.
- Fjern ubrugte biblioteker: Gennemgå dine afhængigheder, og fjern dem, der ikke bruges.
- Optimer billeder: Brug
next/imageog passende formater.
Ydelsesrevisioner med Lighthouse
Ud over bundlestørrelsen er Google Lighthouse et effektivt værktøj, der er indbygget i Chrome DevTools, og som udfører en omfattende revision af din webside. Det kontrollerer:
- Ydeevne: Målepunkter som First Contentful Paint og Largest Contentful Paint.
- Tilgængelighed: Hvor brugervenlig din app er for alle.
- Bedste praksis: Generelle webstandarder.
- SEO: Faktorer inden for søgemaskineoptimering.
Kør det på dit produktionsbuild for at få konkrete forbedringsforslag.
Test din viden
Hvilke af følgende strategier er effektive til at reducere størrelsen på din Next.js-applikations bundle eller forbedre dens ydeevne?
Opsummering og næste trin
Godt arbejde! Du har lært, hvordan du analyserer og optimerer ydeevnen i din Next.js-applikation:
- Vi undersøgte, hvad et bundle er, og hvorfor størrelsen betyder noget.
- Du lærte at konfigurere og fortolke rapporter fra
@next/bundle-analyzer. - Vi gennemgik vigtige optimeringsteknikker som dynamiske imports og tree shaking.
- Til sidst introducerede vi Google Lighthouse til omfattende ydelsesrevisioner.
Brug disse værktøjer til at bygge hurtigere og mere effektive Next.js-applikationer.
Lær TypeScript 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
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Bundleanalyse og performance audits” gratis?
Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Bundleanalyse og performance audits”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Bundleanalyse og performance audits”?
Analysér Deres applikations bundle-størrelse, og udfør audits for at identificere og afhjælpe flaskehalse i ydeevnen. Du øver dig i Next.js 15-fullstackwebapps 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å Next.js 15-fullstackwebapps?
Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps 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 3 af 4.
Hvor lang tid tager lektionen “Bundleanalyse og performance audits”?
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 Next.js 15-fullstackwebapps-lektion?
Ja. Alle Next.js 15-fullstackwebapps-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
- Deployment til Vercel og Netlify
- Optimering af billeder og fonts
- Bundleanalyse og performance audits
- Core Web Vitals og monitorering