Bundle Analyzer

@next/bundle-analyzer Next.js için JavaScript modüllerinizin boyutunu yönetmenize yardımcı olan bir eklentidir. Her modülün boyutu ve bağımlılıkları hakkında görsel bir rapor oluşturur. Bu bilgileri büyük bağımlılıkları kaldırmak, kodunuzu bölmek veya yalnızca gerektiğinde bazı parçaları yüklemek için kullanabilir, böylece istemciye aktarılan veri miktarını azaltabilirsiniz.

Installation

Aşağıdaki komutu çalıştırarak eklentiyi yükleyin:

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

Ardından, paket analizörünün ayarlarını next.config.js adresinize ekleyin.

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
 
/** @type {import('next').NextConfig} */
const nextConfig = {}
 
module.exports = withBundleAnalyzer(nextConfig)

Analyzing your bundles

Paketlerinizi analiz etmek için aşağıdaki komutu çalıştırın:

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

Rapor, tarayıcınızda inceleyebileceğiniz üç yeni sekme açacaktır. Sitenizi geliştirirken ve dağıtmadan önce bunu düzenli olarak yapmak, büyük paketleri daha erken belirlemenize ve uygulamanızı daha performanslı olacak şekilde tasarlamanıza yardımcı olabilir.