Analisi delle dimensioni del bundle
Analizzi e riduca le dimensioni del bundle JavaScript dell'applicazione per velocizzare il caricamento iniziale delle pagine e migliorarne le prestazioni.
Analisi delle dimensioni del bundle è una lezione Next.js 15 Fullstack (App Router + Server Actions) gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
What is a JavaScript Bundle?
When you build a Next.js application for production, all your JavaScript code – your components, libraries, and Next.js itself – gets combined and optimized into one or more files called "bundles".
These bundles are what the user's browser downloads to run your application.
Impact on Performance
The larger your JavaScript bundles are, the longer it takes for a user's browser to download, parse, and execute them.
- Slower Load Times: Users wait longer for your app to become interactive.
- Higher Data Usage: Especially important for mobile users on limited data plans.
- Worse User Experience: Can lead to frustration and users abandoning your site.
Analyzing Your Build Output
Next.js provides useful information when you run next build. It shows the size of each page's JavaScript bundle.
However, for a deeper look into what's inside those bundles, you need specialized tools.
next buildVisualizing Bundles with Analyzer
The @next/bundle-analyzer package is a powerful tool. It creates an interactive treemap visualization of your bundles.
This visual map helps you quickly identify large modules or third-party libraries that contribute significantly to your bundle size.
Configuring the Analyzer
First, install the package:
npm install --save-dev @next/bundle-analyzer
Then, update your next.config.js to enable it conditionally:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
openAnalyzer: false,
});
module.exports = withBundleAnalyzer({});Generating the Bundle Report
To generate the report, you need to set the ANALYZE environment variable and then run your Next.js build command.
This will create HTML files in your .next/analyze folder that you can open in your browser.
ANALYZE=true npm run buildWhat Makes Bundles Large?
Several factors can lead to an oversized bundle:
- Large Libraries: Importing an entire library when you only use a small part.
- Duplicate Code: Different parts of your app importing the same module.
- Unused Code: Code that's included but never executed (dead code).
- Heavy Assets: Inline SVG or base64 images directly in JS files.
Splitting Code for Efficiency
Code splitting is a technique that breaks your code into smaller "chunks" that can be loaded on demand. Next.js does this automatically for pages.
For components within a page, you can use dynamic imports to load them only when needed, reducing the initial bundle size.
Lazily Loading Components
Use next/dynamic to import components only when they are rendered. This is perfect for components that aren't critical for the initial page load, like modals or admin panels.
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>
);
}Quick Check: Bundle Optimization
Consider a Next.js application that has grown significantly. Which of the following strategies are effective for reducing the initial JavaScript bundle size?
Summary of Bundle Optimization
Great job! You've learned how to analyze your Next.js application's JavaScript bundle size and implement key optimization techniques.
- Use
@next/bundle-analyzerto visualize your bundles. - Implement dynamic imports for non-critical components.
- Be mindful of large third-party libraries and ensure tree-shaking is effective.
Optimizing bundle size is crucial for delivering a fast and responsive user experience.
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Analisi delle dimensioni del bundle» è gratuita?
Sì — il testo completo di «Analisi delle dimensioni del bundle» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Cosa imparerò in «Analisi delle dimensioni del bundle»?
Analizzi e riduca le dimensioni del bundle JavaScript dell'applicazione per velocizzare il caricamento iniziale delle pagine e migliorarne le prestazioni. Eserciti Next.js 15 Fullstack (App Router + Server Actions) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Next.js 15 Fullstack (App Router + Server Actions)?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Analisi delle dimensioni del bundle»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack (App Router + Server Actions)?
Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ottimizzazione di immagini e font
- Analisi delle dimensioni del bundle
- Strategie avanzate di caching
- UI in streaming con Suspense e stati di caricamento