أداة تحليل الحزم (Bundle Analyzer)

@next/bundle-analyzer هي إضافة لـ Next.js تساعدك في إدارة حجم وحدات JavaScript الخاصة بك. تقوم بإنشاء تقرير مرئي لحجم كل وحدة والتبعيات الخاصة بها. يمكنك استخدام هذه المعلومات لإزالة التبعيات الكبيرة، أو تقسيم الكود الخاص بك، أو تحميل بعض الأجزاء فقط عند الحاجة، مما يقلل من كمية البيانات المنقولة إلى العميل.

التثبيت

قم بتثبيت الإضافة عن طريق تنفيذ الأمر التالي:

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

ثم، أضف إعدادات أداة تحليل الحزم إلى ملف next.config.js الخاص بك.

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

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

module.exports = withBundleAnalyzer(nextConfig)

تحليل حزمك

قم بتنفيذ الأمر التالي لتحليل حزمك:

ANALYZE=true npm run build
# أو
ANALYZE=true yarn build
# أو
ANALYZE=true pnpm build

سيقوم التقرير بفتح ثلاث علامات تبويب جديدة في متصفحك، والتي يمكنك فحصها. القيام بذلك بانتظام أثناء التطوير وقبل نشر موقعك يمكن أن يساعدك في تحديد الحزم الكبيرة مبكرًا، وتصميم تطبيقك ليكون أكثر كفاءة.