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

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

تحليل حزم 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. راجع القائمة الكاملة.

تجميع حزم محددة

لتجميع حزم محددة، يمكنك استخدام خيار transpilePackages في ملف next.config.js الخاص بك. هذا الخيار مفيد لتجميع الحزم الخارجية التي لم يتم تجميعها مسبقًا، على سبيل المثال، في مستودع أحادي (monorepo) أو مستوردة من node_modules.

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

module.exports = nextConfig

تجميع جميع الحزم

لتجميع جميع الحزم تلقائيًا (السلوك الافتراضي في موجه التطبيق)، يمكنك استخدام خيار bundlePagesRouterDependencies في ملف next.config.js الخاص بك.

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

module.exports = nextConfig

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

إذا كنت قد مكنت خيار bundlePagesRouterDependencies، يمكنك استثناء حزم محددة من التجميع التلقائي باستخدام خيار serverExternalPackages في ملف next.config.js الخاص بك:

/** @type {import('next').NextConfig} */
const nextConfig = {
  # تجميع الحزم الخارجية تلقائيًا في موجه الصفحات:
  bundlePagesRouterDependencies: true,
  # استثناء حزم محددة من التجميع لكل من موجه التطبيق وموجه الصفحات:
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig