reactCompiler

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

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

كيفية العمل

يعمل مترجم React من خلال إضافة Babel. للحفاظ على سرعة عمليات البناء، يستخدم Next.js تحسين SWC مخصصًا يطبق مترجم React فقط على الملفات ذات الصلة - مثل تلك التي تحتوي على JSX أو خطافات React.

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

لاستخدامه، قم بتثبيت babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

ثم، أضف خيار experimental.reactCompiler في next.config.js:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig

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

module.exports = nextConfig

التعليقات التوضيحية

يمكنك تكوين المترجم للعمل في وضع "الاشتراك الاختياري" كما يلي:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

module.exports = nextConfig

ثم يمكنك إضافة تعليق توضيحي لمكونات أو خطافات محددة باستخدام توجيه "use memo" من React للاشتراك الاختياري:

export default function Page() {
  'use memo'
  // ...
}

export default function Page() {
  'use memo'
  // ...
}

ملاحظة: يمكنك أيضًا استخدام توجيه "use no memo" من React للحصول على تأثير معاكس، للانسحاب من مكون أو خطاف.