@next/bundle-analyzer – Vizualizarea și optimizarea dimensiunii pachetelor JS în Next.js

ANALYZE=true npm run build

Ce face @next/bundle-analyzer - Vizualizarea și optimizarea dimensiunii pachetelor JS

Pachetul oficial @next/bundle-analyzer analizează compilarea Webpack/Turbopack și generează fișiere HTML interactive care afișează fiecare modul ca un dreptunghi proporțional cu dimensiunea sa în octeți.

Este unealta principală prin care dezvoltatorii identifică librării redundante descărcate accidental (de exemplu importul întregii librării `lodash` în loc de o singură funcție, sau pachete de iconițe neoptimizate).

Se activează printr-o variabilă de mediu doar atunci când se dorește analiza.

Exemple

Exemplul 1: Configurarea bundle analyzer în next.config.js

Învelește configurația cu funcția de analiză condiționată.

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

module.exports = withBundleAnalyzer({
  reactStrictMode: True,
});

Ieșire în terminal

La rularea cu ANALYZE=true se deschid rapoartele HTML în browser.

Greșeli frecvente

• Lăsarea opțiunii enabled: True permanent în producție, ceea ce va încetini fiecare build din pipeline-ul CI/CD.

Comenzi înrudite

• next build - Compilarea și optimizarea aplicației pentru producție: Compilează codul TypeScript/React, generează paginile statice și creează pachetele JS optimizate în directorul .next/.
• next/dynamic - Încărcarea leneșă a componentelor grele (Lazy Loading): Dezmembrează componentele masive în bucăți separate (code splitting) încărcate în browser doar la cerere.
• next.config.js - Fișierul principal de configurare Next.js: Centralizează setările avansate ale compilatorului, modulelor externe, regulilor de redirecționare și mediului de rulare.