كيفية تحسين بيئة التطوير المحلية لديك

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

التطوير المحلي مقابل الإنتاج

عملية التطوير باستخدام next dev تختلف عن next build و next start.

next dev تقوم بترجمة المسارات في تطبيقك أثناء فتحها أو التنقل إليها. هذا يمكّنك من بدء خادم التطوير دون انتظار ترجمة كل المسارات في تطبيقك، مما يجعل العملية أسرع ويستهلك ذاكرة أقل. بينما يقوم بناء الإنتاج بتطبيق تحسينات أخرى مثل تصغير الملفات وإنشاء تجزئات المحتوى، والتي لا تكون ضرورية للتطوير المحلي.

تحسين أداء التطوير المحلي

1. تحقق من برنامج مكافحة الفيروسات على جهازك

برامج مكافحة الفيروسات يمكن أن تبطئ الوصول إلى الملفات.

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

2. قم بتحديث Next.js وتمكين Turbopack

تأكد من استخدام أحدث إصدار من Next.js. كل إصدار جديد غالبًا ما يتضمن تحسينات في الأداء.

Turbopack هو حزمة جديدة مدمجة في Next.js يمكنها تحسين الأداء المحلي.

npm install next@latest
npm run dev --turbopack

تعلم المزيد عن Turbopack. راجع أدلة الترقية وأدوات التعديل التلقائي لمزيد من المعلومات.

3. تحقق من عمليات الاستيراد الخاصة بك

طريقة استيرادك للكود يمكن أن تؤثر بشكل كبير على وقت الترجمة والتجميع. تعلم المزيد عن تحسين تجميع الحزم واستكشف أدوات مثل Dependency Cruiser أو Madge.

مكتبات الأيقونات

مكتبات مثل @material-ui/icons أو react-icons يمكنها استيراد آلاف الأيقونات، حتى إذا كنت تستخدم عددًا قليلاً فقط. حاول استيراد الأيقونات التي تحتاجها فقط:

// بدلاً من هذا:
import { Icon1, Icon2 } from 'react-icons/md'

// افعل هذا:
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

مكتبات مثل react-icons تتضمن العديد من مجموعات الأيقونات المختلفة. اختر مجموعة واحدة والتزم بها.

على سبيل المثال، إذا كان تطبيقك يستخدم react-icons ويستورد كل هذه المجموعات:

pi (Phosphor Icons)
md (Material Design Icons)
tb (tabler-icons)
cg (cssgg)

مجتمعة سيكون هناك عشرات الآلاف من الوحدات التي يجب على المترجم التعامل معها، حتى إذا كنت تستخدم استيرادًا واحدًا فقط من كل مجموعة.

ملفات البرميل

"ملفات البرميل" هي ملفات تصدر العديد من العناصر من ملفات أخرى. يمكنها إبطاء عمليات البناء لأن المترجم يجب أن يحللها للعثور على ما إذا كانت هناك تأثيرات جانبية في نطاق الوحدة باستخدام الاستيراد.

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

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

يمكن لـ Next.js تحسين عمليات الاستيراد تلقائيًا لبعض الحزم. إذا كنت تستخدم حزمًا تستخدم ملفات برميل، أضفها إلى next.config.js:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

يقوم Turbopack تلقائيًا بتحليل عمليات الاستيراد وتحسينها. لا يتطلب هذا التكوين.

4. تحقق من إعداد Tailwind CSS الخاص بك

إذا كنت تستخدم Tailwind CSS، تأكد من إعداده بشكل صحيح.

خطأ شائع هو تكوين مصفوفة content بطريقة تتضمن node_modules أو مجلدات كبيرة أخرى من الملفات التي لا يجب فحصها.

إصدار Tailwind CSS 3.4.8 أو أحدث سوف يحذرك من الإعدادات التي قد تبطئ عملية البناء.

في tailwind.config.js، كن محددًا بشأن الملفات التي يجب فحصها:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // جيد
    // قد يكون هذا واسعًا جدًا
    // سيطابق أيضًا `packages/**/node_modules`
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

تجنب فحص ملفات غير ضرورية:

module.exports = {
  content: [
    // أفضل - يفحص فقط مجلد 'src'
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

5. تحقق من إعدادات webpack المخصصة

إذا أضفت إعدادات webpack مخصصة، فقد تبطئ عملية الترجمة.

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

6. تحسين استخدام الذاكرة

إذا كان تطبيقك كبيرًا جدًا، فقد يحتاج إلى ذاكرة أكثر.

تعلم المزيد عن تحسين استخدام الذاكرة.

7. مكونات الخادم وجلب البيانات

التغييرات في مكونات الخادم تتسبب في إعادة عرض الصفحة بالكامل محليًا لإظهار التغييرات الجديدة، بما في ذلك جلب بيانات جديدة للمكون.

خيار serverComponentsHmrCache التجريبي يسمح لك بتخزين استجابات fetch في مكونات الخادم عبر تحديثات استبدال الوحدة الساخنة (HMR) في التطوير المحلي. هذا يؤدي إلى استجابات أسرع وتكاليف مخفضة لمكالمات API المدفوعة.

تعلم المزيد عن الخيار التجريبي.

8. فكر في التطوير المحلي بدلاً من Docker

إذا كنت تستخدم Docker للتطوير على Mac أو Windows، فقد تواجه أداءً أبطأ بكثير مقارنة بتشغيل Next.js محليًا.

يمكن أن يتسبب نظام ملفات Docker على Mac وWindows في استغراق استبدال الوحدة الساخنة (HMR) ثواني أو حتى دقائق، بينما يعمل نفس التطبيق مع HMR سريع عند التطوير محليًا.

هذا الاختلاف في الأداء يرجع إلى كيفية تعامل Docker مع عمليات نظام الملفات خارج بيئات Linux. للحصول على أفضل تجربة تطوير:

استخدم التطوير المحلي (npm run dev أو pnpm dev) بدلاً من Docker أثناء التطوير
احتفظ بـ Docker لنشر الإنتاج واختبار بناء الإنتاج
إذا كان يجب عليك استخدام Docker للتطوير، فكر في استخدام Docker على جهاز Linux أو VM

تعلم المزيد عن نشر Docker للاستخدام في الإنتاج.

أدوات للعثور على المشاكل

تسجيل جلب البيانات المفصل

استخدم خيار logging.fetches في ملف next.config.js لرؤية معلومات أكثر تفصيلاً عما يحدث أثناء التطوير:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

تعلم المزيد عن تسجيل جلب البيانات.

تتبع Turbopack

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

تأكد من أن لديك أحدث إصدار من Next.js مثبتًا.
أنشئ ملف تتبع Turbopack:
```
NEXT_TURBOPACK_TRACING=1 npm run dev
```
تنقل حول تطبيقك أو قم بإجراء تعديلات على الملفات لإعادة إنتاج المشكلة.
أوقف خادم تطوير Next.js.
سيكون ملف يسمى trace-turbopack متاحًا في مجلد .next.
يمكنك تفسير الملف باستخدام next internal trace [مسار-إلى-الملف]:
```
next internal trace .next/trace-turbopack
```
في الإصدارات التي لا يتوفر فيها trace، كان الأمر يسمى turbo-trace-server:
```
next internal turbo-trace-server .next/trace-turbopack
```
بمجرد تشغيل خادم التتبع، يمكنك عرض التتبع على https://trace.nextjs.org/.
بشكل افتراضي، سيقوم عارض التتبع بتجميع التوقيتات، لرؤية كل وقت فردي يمكنك التبديل من "Aggregated in order" إلى "Spans in order" في أعلى يمين العارض.

لا تزال تواجه مشاكل؟

شارك ملف التتبع الذي تم إنشاؤه في قسم تتبع Turbopack وشاركه على مناقشات GitHub أو Discord.

كيفية تحسين بيئة التطوير المحلية لديك

On this page