استخدام الذاكرة

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

دعونا نستكشف بعض الاستراتيجيات والتقنيات لتحسين الذاكرة ومعالجة مشاكل الذاكرة الشائعة في Next.js.

تقليل عدد التبعيات

التطبيقات التي تحتوي على عدد كبير من التبعيات ستستخدم ذاكرة أكثر.

يمكن لـ محلل الحزم (Bundle Analyzer) مساعدتك في اكتشاف التبعيات الكبيرة في تطبيقك والتي يمكن إزالتها لتحسين الأداء واستخدام الذاكرة.

تشغيل next build مع --experimental-debug-memory-usage

بدءًا من الإصدار 14.2.0، يمكنك تشغيل next build --experimental-debug-memory-usage لتشغيل عملية البناء في وضع يقوم Next.js بطباعة معلومات عن استخدام الذاكرة بشكل مستمر أثناء البناء، مثل استخدام الذاكرة الكومية وإحصائيات جمع القمامة. كما سيتم أخذ لقطات للذاكرة الكومية تلقائيًا عندما يقترب استخدام الذاكرة من الحد المحدد.

معلومة مفيدة: هذه الميزة غير متوافقة مع خيار عامل بناء Webpack الذي يتم تمكينه تلقائيًا إلا إذا كان لديك تكوين مخصص لـ Webpack.

تسجيل ملف تعريف للذاكرة الكومية

للبحث عن مشاكل الذاكرة، يمكنك تسجيل ملف تعريف للذاكرة الكومية من Node.js وتحميله في Chrome DevTools لتحديد مصادر تسرب الذاكرة المحتملة.

في طرفيتك، مرر علم --heap-prof إلى Node.js عند بدء بناء Next.js:

node --heap-prof node_modules/next/dist/bin/next build

في نهاية عملية البناء، سيتم إنشاء ملف .heapprofile بواسطة Node.js.

في Chrome DevTools، يمكنك فتح علامة تبويب الذاكرة والنقر على زر "تحميل الملف الشخصي" لتصور الملف.

تحليل لقطة للذاكرة الكومية

يمكنك استخدام أداة مفتش لتحليل استخدام الذاكرة في التطبيق.

عند تشغيل أمر next build أو next dev، أضف NODE_OPTIONS=--inspect في بداية الأمر. سيعرض هذا وكيل المفتش على المنفذ الافتراضي. إذا كنت ترغب في التوقف قبل بدء أي كود مستخدم، يمكنك تمرير --inspect-brk بدلاً من ذلك. أثناء تشغيل العملية، يمكنك استخدام أداة مثل Chrome DevTools للاتصال بمنفذ التصحيح لتسجيل وتحليل لقطة للذاكرة الكومية لمعرفة ما يتم الاحتفاظ به في الذاكرة.

بدءًا من الإصدار 14.2.0، يمكنك أيضًا تشغيل next build مع علم --experimental-debug-memory-usage لتسهيل أخذ لقطات الذاكرة الكومية.

أثناء التشغيل في هذا الوضع، يمكنك إرسال إشارة SIGUSR2 إلى العملية في أي وقت، وسوف تأخذ العملية لقطة للذاكرة الكومية.

سيتم حفظ لقطة الذاكرة الكومية في جذر مشروع تطبيق Next.js ويمكن تحميلها في أي محلل للذاكرة الكومية، مثل Chrome DevTools، لمعرفة ما يتم الاحتفاظ به في الذاكرة. هذا الوضع غير متوافق بعد مع عمال بناء Webpack.

راجع كيفية تسجيل وتحليل لقطات الذاكرة الكومية لمزيد من المعلومات.

عامل بناء Webpack

يسمح عامل بناء Webpack بتشغيل عمليات تجميع Webpack داخل عامل Node.js منفصل مما يقلل استخدام الذاكرة في تطبيقك أثناء عمليات البناء.

يتم تمكين هذا الخيار افتراضيًا إذا لم يكن لتطبيقك تكوين مخصص لـ Webpack بدءًا من الإصدار v14.1.0.

إذا كنت تستخدم إصدارًا أقدم من Next.js أو لديك تكوين مخصص لـ Webpack، يمكنك تمكين هذا الخيار عن طريق تعيين experimental.webpackBuildWorker: true داخل ملف next.config.js.

معلومة مفيدة: قد لا تكون هذه الميزة متوافقة مع جميع إضافات Webpack المخصصة.

تعطيل ذاكرة التخزين المؤقت لـ Webpack

ذاكرة التخزين المؤقت لـ Webpack تحفظ وحدات Webpack المُنشأة في الذاكرة و/أو على القرص لتحسين سرعة عمليات البناء. هذا يمكن أن يساعد في الأداء، ولكنه أيضًا يزيد من استخدام الذاكرة في تطبيقك لتخزين البيانات المؤقتة.

يمكنك تعطيل هذا السلوك عن طريق إضافة تكوين مخصص لـ Webpack إلى تطبيقك:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // مهم: إرجاع التكوين المعدل
    return config
  },
}

export default nextConfig

تعطيل خرائط المصدر (Source Maps)

إنشاء خرائط المصدر يستهلك ذاكرة إضافية أثناء عملية البناء.

يمكنك تعطيل إنشاء خرائط المصدر عن طريق إضافة productionBrowserSourceMaps: false و experimental.serverSourceMaps: false إلى تكوين Next.js الخاص بك.

معلومة مفيدة: بعض الإضافات قد تقوم بتمكين خرائط المصدر وقد تتطلب تكوينًا مخصصًا لتعطيلها.

مشاكل الذاكرة في Edge

قام Next.js v14.1.3 بإصلاح مشكلة في الذاكرة عند استخدام وقت تشغيل Edge. يرجى التحديث إلى هذا الإصدار (أو أحدث) لمعرفة ما إذا كان يحل مشكلتك.