كيفية تحسين تجميع الحزم

يمكن أن يؤدي تجميع الحزم الخارجية إلى تحسين أداء تطبيقك بشكل كبير. بشكل افتراضي، تقوم Next.js تلقائيًا بتجميع الحزم المستوردة داخل مكونات الخادم ومعالجات المسارات. سيرشدك هذه الصفحة حول كيفية تحليل وتحسين تجميع الحزم بشكل أكبر.

تحليل حزم JavaScript

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

التثبيت

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

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

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

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

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

module.exports = withBundleAnalyzer(nextConfig)

إنشاء تقرير

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

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

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

تحسين استيراد الحزم

بعض الحزم، مثل مكتبات الأيقونات، يمكنها تصدير مئات الوحدات، مما قد يسبب مشاكل في الأداء أثناء التطوير والإنتاج.

يمكنك تحسين طريقة استيراد هذه الحزم عن طريق إضافة خيار optimizePackageImports إلى ملف next.config.js الخاص بك. هذا الخيار سيقوم بتحميل الوحدات التي تستخدمها فعليًا فقط، مع الحفاظ على راحتك في كتابة عبارات الاستيراد مع العديد من الصادرات المسماة.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

تقوم Next.js أيضًا بتحسين بعض المكتبات تلقائيًا، وبالتالي لا تحتاج إلى تضمينها في قائمة optimizePackageImports. راجع القائمة الكاملة.

استثناء حزم محددة من التجميع

نظرًا لأن الحزم المستوردة داخل مكونات الخادم ومعالجات المسارات يتم تجميعها تلقائيًا بواسطة Next.js، يمكنك استثناء حزم محددة من التجميع باستخدام خيار serverExternalPackages في ملف next.config.js الخاص بك.

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

تتضمن Next.js قائمة بالحزم الشهيرة التي تعمل حاليًا على التوافق ويتم استثناؤها تلقائيًا. راجع القائمة الكاملة.