Turbopack

Turbopack هو حزمة تدريجية (incremental bundler) مُحسنة لجافا سكريبت وTypeScript، مكتوبة بلغة Rust ومدمجة في Next.js. يمكنك استخدام Turbopack مع كل من موجه الصفحات (Pages Router) وموجه التطبيق (App Router) لتجربة تطوير محلية أسرع بكثير.

لماذا Turbopack؟

قمنا ببناء Turbopack لدفع أداء Next.js، بما في ذلك:

رسم بياني موحد: يدعم Next.js بيئات إخراج متعددة (مثل العميل والخادم). إدارة عدة مترجمين (compilers) وتجميع الحزم معًا يمكن أن يكون مرهقًا. يستخدم Turbopack رسمًا بيانيًا واحدًا موحدًا لجميع البيئات.
التجميع مقابل ESM الأصلي: بعض الأدوات تتخطى التجميع في وضع التطوير وتعتمد على ESM الأصلي في المتصفح. هذا يعمل جيدًا للتطبيقات الصغيرة ولكن يمكن أن يبطئ التطبيقات الكبيرة بسبب طلبات الشبكة المفرطة. يقوم Turbopack بتجميع الحزم في وضع التطوير، ولكن بطريقة مُحسنة للحفاظ على سرعة التطبيقات الكبيرة.
الحساب التدريجي: يقوم Turbopack بتوزيع العمل عبر الأنوية (cores) ويخزن النتائج في ذاكرة التخزين المؤقت حتى مستوى الوظيفة. بمجرد الانتهاء من جزء من العمل، لن يكرره Turbopack.
التجميع الكسول: يقوم Turbopack فقط بتجميع ما يتم طلبه فعليًا من خادم التطوير. هذا النهج الكسول يمكن أن يقلل أوقات التجميع الأولية واستخدام الذاكرة.

البدء

لتمكين Turbopack في مشروع Next.js الخاص بك، أضف العلم --turbopack إلى نصوص dev وbuild في ملف package.json:

package.json

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

حاليًا، Turbopack لـ dev مستقر، بينما build في مرحلة ألفا. نحن نعمل بنشاط على دعم الإنتاج مع اقتراب Turbopack من الاستقرار.

الميزات المدعومة

يحتوي Turbopack في Next.js على تهيئة صفرية (zero-configuration) لحالات الاستخدام الشائعة. فيما يلي ملخص لما يتم دعمه مباشرة، بالإضافة إلى بعض المراجع لكيفية تكوين Turbopack بشكل أكبر عند الحاجة.

ميزات اللغة

الميزة	الحالة	ملاحظات
جافا سكريبت وTypeScript	مدعوم	يستخدم SWC تحت الغطاء. فحص الأنواع (type-checking) لا يتم بواسطة Turbopack (قم بتشغيل `tsc --watch` أو اعتمد على بيئة التطوير المتكاملة (IDE) لفحص الأنواع).
ECMAScript (ESNext)	مدعوم	يدعم Turbopack أحدث ميزات ECMAScript، بما يتطابق مع تغطية SWC.
CommonJS	مدعوم	بناء الجملة `require()` يتم التعامل معه مباشرة.
ESM	مدعوم	`import` الثابت والديناميكي مدعومان بالكامل.
Babel	مدعوم جزئيًا	لا يتضمن Turbopack Babel افتراضيًا. ومع ذلك، يمكنك تكوين `babel-loader` عبر إعدادات Turbopack.

ميزات الإطار (Framework) وReact

الميزة	الحالة	ملاحظات
JSX / TSX	مدعوم	يتعامل SWC مع تجميع JSX/TSX.
تحديث سريع (Fast Refresh)	مدعوم	لا حاجة للتكوين.
مكونات خادم React (RSC)	مدعوم	لموجه التطبيق (App Router) في Next.js. يضمن Turbopack تجميع صحيح للخادم/العميل.
إنشاء تخطيط جذر (Root layout)	غير مدعوم	إنشاء تلقائي لتخطيط جذر في موجه التطبيق غير مدعوم. سيوجهك Turbopack لإنشائه يدويًا.

CSS والتنسيق

الميزة	الحالة	ملاحظات
CSS عام	مدعوم	استيراد ملفات `.css` مباشرة في تطبيقك.
وحدات CSS	مدعوم	ملفات `.module.css` تعمل بشكل أصلي (Lightning CSS).
تداخل CSS	مدعوم	يدعم Lightning CSS تداخل CSS الحديث.
بناء جملة @import	مدعوم	دمج عدة ملفات CSS.
PostCSS	مدعوم	يعالج تلقائيًا `postcss.config.js` في مجموعة عمل Node.js. مفيد لـ Tailwind، Autoprefixer، إلخ.
Sass / SCSS	مدعوم (Next.js)	في Next.js، Sass مدعوم مباشرة. في المستقبل، من المحتمل أن يتطلب استخدام Turbopack بشكل مستقل تكوين محمل (loader).
Less	مخطط عبر الإضافات	غير مدعوم افتراضيًا بعد. من المحتمل أن يتطلب تكوين محمل بمجرد استقرار المحملات المخصصة.
Lightning CSS	قيد الاستخدام	يتعامل مع تحويلات CSS. بعض ميزات وحدات CSS قليلة الاستخدام (مثل `:local/:global` كفئات زائفة مستقلة) غير مدعومة بعد. انظر أدناه لمزيد من التفاصيل.

الأصول (Assets)

الميزة	الحالة	ملاحظات
أصول ثابتة (صور، خطوط)	مدعوم	استيراد `import img from './img.png'` يعمل مباشرة. في Next.js، يُرجع كائنًا لمكون `<Image />`.
استيراد JSON	مدعوم	استيراد مسمى أو افتراضي من `.json` مدعوم.

دقة الوحدات (Module resolution)

الميزة	الحالة	ملاحظات
أسماء مسارات (Path Aliases)	مدعوم	يقرأ `paths` و`baseUrl` من `tsconfig.json`، بما يتطابق مع سلوك Next.js.
أسماء مسارات يدوية	مدعوم	قم بتكوين `resolveAlias` في `next.config.js` (مشابه لـ `webpack.resolve.alias`).
امتدادات مخصصة	مدعوم	قم بتكوين `resolveExtensions` في `next.config.js`.
AMD	مدعوم جزئيًا	التحويلات الأساسية تعمل؛ استخدام AMD المتقدم محدود.

الأداء والتحديث السريع (Fast Refresh)

الميزة	الحالة	ملاحظات
تحديث سريع	مدعوم	تحديث جافا سكريبت وTypeScript وCSS دون تحديث كامل.
تجميع تدريجي	مدعوم	يقوم Turbopack ببناء ما يتم طلبه فقط من خادم التطوير بشكل كسول، مما يسرع التطبيقات الكبيرة.

ميزات غير مدعومة وغير مخطط لها

بعض الميزات غير مطبقة بعد أو غير مخطط لها:

ميزات وحدات CSS القديمة
- الفئات الزائفة المستقلة :local و:global (فقط متغير الدالة :global(...) مدعوم).
- قاعدة @value (تم استبدالها بمتغيرات CSS).
- قواعد ICSS :import و:export.
- composes في .module.css تتكون من ملف .css. في webpack سيعامل ملف .css كوحدة CSS، مع Turbopack سيكون ملف .css دائمًا عامًا. هذا يعني أنه إذا كنت تريد استخدام composes في وحدة CSS، فأنت بحاجة إلى تغيير ملف .css إلى .module.css.
- @import في وحدات CSS تستورد .css كوحدة CSS. في webpack سيعامل ملف .css كوحدة CSS، مع Turbopack سيكون ملف .css دائمًا عامًا. هذا يعني أنه إذا كنت تريد استخدام @import في وحدة CSS، فأنت بحاجة إلى تغيير ملف .css إلى .module.css.
تكوين webpack() في next.config.js يحل Turbopack محل webpack، لذا تكوينات webpack() غير معترف بها. استخدم تكوين turbopack بدلاً من ذلك.
AMP غير مخطط لدعم Turbopack في Next.js.
Yarn PnP غير مخطط لدعم Turbopack في Next.js.
experimental.urlImports غير مخطط لـ Turbopack.
experimental.esmExternals غير مخطط. لا يدعم Turbopack تكوين esmExternals القديم في Next.js.
بعض أعلام Next.js التجريبية
- experimental.typedRoutes
- experimental.nextScriptWorkers
- experimental.sri.algorithm
- experimental.fallbackNodePolyfills نخطط لتنفيذها في المستقبل.

للحصول على تفصيل كامل لكل علم ميزة وحالته، راجع مرجع Turbopack API.

التكوين

يمكن تكوين Turbopack عبر next.config.js (أو next.config.ts) تحت مفتاح turbopack. خيارات التكوين تشمل:

rules تحديد محملات webpack إضافية لتحويلات الملفات.
resolveAlias إنشاء أسماء مسارات يدوية (مثل resolve.alias في webpack).
resolveExtensions تغيير أو تمديد امتدادات الملفات لدقة الوحدات.
moduleIds تعيين كيفية إنشاء معرفات الوحدات ('named' مقابل 'deterministic').
treeShaking تمكين أو تعطيل هز الشجرة (tree shaking) في التطوير وبناء الإنتاج المستقبلي.
memoryLimit تعيين حد للذاكرة (بالبايت) لـ Turbopack.

next.config.js

module.exports = {
  turbopack: {
    // مثال: إضافة اسم مسار وامتداد ملف مخصص
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

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

إنشاء ملفات تتبع لتصحيح الأداء

إذا واجهت مشاكل في الأداء أو الذاكرة وتريد مساعدة فريق Next.js في تشخيصها، يمكنك إنشاء ملف تتبع بإضافة NEXT_TURBOPACK_TRACING=1 إلى أمر التطوير:

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

سيؤدي هذا إلى إنشاء ملف .next/trace-turbopack. قم بتضمين هذا الملف عند إنشاء مشكلة على مستودع Next.js لمساعدتنا في التحقيق.

ملخص

Turbopack هو حزمة مبنية بلغة Rust وتدريجية مصممة لجعل التطوير المحلي والبناء سريعًا - خاصة للتطبيقات الكبيرة. وهو مدمج في Next.js، ويوفر دعمًا بدون تكوين لـ CSS وReact وTypeScript.

ترقبوا المزيد من التحديثات بينما نواصل تحسين Turbopack وإضافة دعم بناء الإنتاج. في الوقت الحالي، جربه باستخدام next dev --turbopack وأخبرنا بملاحظاتك.

تغييرات الإصدار

الإصدار	التغييرات
`v15.3.0`	دعم تجريبي لـ `build`
`v15.0.0`	Turbopack لـ `dev` مستقر

On this page