پذیرش تدریجی کامپایلر

کامپایلر React را می‌توان به صورت قدم‌به‌قدم و تدریجی وارد پروژه کرد. این کار به شما اجازه می‌دهد تا ابتدا آن را روی بخش‌های خاصی از کدهای خود تست کنید و سپس مابقی پروژه را ارتقا دهید.

چیزهایی که یاد می‌گیرید:

• چرا پذیرش تدریجی پیشنهاد می‌شود؟

• استفاده از Overrides در بابل برای فعال‌سازی پوشه به پوشه

• استفاده از دستور "use memo" برای فعال‌سازی کامپوننت به کامپوننت

• استفاده از دستور "use no memo" برای مستثنی کردن کامپوننت‌ها

• استفاده از قابلیت Gating برای کنترل کامپایلر در زمان اجرا (Runtime)

چرا پذیرش تدریجی (Incremental Adoption)؟

اگرچه کامپایلر React برای بهینه‌سازی خودکار کل پروژه طراحی شده است، اما نیازی نیست آن را یک‌باره برای همه فایل‌ها فعال کنید.

1. ایجاد اطمینان: شروع از بخش‌های کوچک به شما اجازه می‌دهد تا رفتار درست برنامه‌، بهبود سرعت و کدهای کامپایل شده را در محیط‌های حساس (مثل محیط عملیاتی/Production) بدون ریسک ارزیابی کنید.

2. مدیریت آسان خطاها: اگر کامپایلر با نقض «قوانین راکت» در کدهای قدیمی شما مواجه شود، به جای اصلاح یک‌باره کل پروژه، می‌توانید خطاهای هر بخش را به صورت سیستماتیک و خردخرد برطرف کنید.

3. تست‌های A/B: با فعال کردن کامپایلر روی بخش‌های خاص، می‌توانید تاثیر واقعی بهینه‌سازی آن را روی سرعت کاربران واقعی بسنجید.

۳ روش اصلی برای پذیرش تدریجی

روش اول: فعال‌سازی پوشه‌ای با Overrides بابل (Babel Overrides)

قابلیت overrides در بابل به شما اجازه می‌دهد پلاگین‌ها را فقط روی پوشه‌های خاصی از پروژه اعمال کنید. این روش برای ورود لایه به لایه کامپایلر عالی است.

تنظیمات پایه (فقط پوشه modern):

// babel.config.js
module.exports = {
  plugins: [ /* پلاگین‌های سراسری */ ],
  overrides: [
    {
      // کامپایلر فقط روی فایل‌های داخل این پوشه اعمال می‌شود
      test: './src/modern/**/*.{js,jsx,ts,tsx}',
      plugins: [ 'babel-plugin-react-compiler' ]
    }
  ]
};

گسترش مسیرها و افزودن تنظیمات اختصاصی: هر زمان که از پایداری کدها مطمئن شدید، پوشه‌های بیشتری را اضافه کنید یا برای هر پوشه تنظیمات متفاوتی در نظر بگیرید:

// babel.config.js
module.exports = {
  plugins: [],
  overrides: [
    {
      test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'],
      plugins: [ ['babel-plugin-react-compiler', { /* تنظیمات ۱ */ }] ]
    },
    {
      test: './src/legacy/**/*.{js,jsx,ts,tsx}',
      plugins: [ /* پلاگین‌های متفاوت برای کدهای قدیمی */ ]
    }
  ]
};

روش دوم: حالت اختیاری با دستور "use memo" (Opt-in Mode)

برای کنترل حداکثری و بسیار دقیق روی تک‌تک کامپوننت‌ها، می‌توانید حالت کامپایل را روی annotation تنظیم کنید. در این حالت، کامپایلر هیچ کدی را لمس نمی‌کند مگر اینکه خودتان صراحتاً اجازه داده باشید.

تنظیم فایل پیکربندی:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation', // فعال‌سازی حالت نشانه‌گذاری
    }],
  ],
};

نحوه استفاده در کد: کافی است عبارت "use memo" را در اولین خط تابع کامپوننت یا هوک اختصاصی خود بنویسید:

function TodoList({ todos }) {
  "use memo"; // این کامپوننت وارد چرخه بهینه‌سازی کامپایلر می‌شود

  const sortedTodos = todos.slice().sort();
  return (
    <ul>
      {sortedTodos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
    </ul>
  );
}

function useSortedData(data) {
  "use memo"; // این هوک اختصاصی هم کامپایل می‌شود
  return data.slice().sort();
}

یادآوری: در این حالت، فراموش نکنید که باید این دستور را برای هر کامپوننت یا هوک جدیدی که می‌سازید و می‌خواهید بهینه‌سازی شود، به صورت دستی بنویسید.

روش سوم: کنترل در زمان اجرا با پرچم‌های ویژگی (Runtime Gating)

قابلیت gating به شما اجازه می‌دهد کدهای بهینه‌سازی شده را از طریق سیستم پرچم ویژگی (Feature Flags) در زمان اجرای برنامه کنترل کنید. این روش برای اجرای تست‌هایکی (A/B Testing) بسیار کاربردی است.

نحوه کارکرد: کامپایلر کدهای بهینه‌سازی شده را درون یک شرط بررسی قرار می‌دهد. اگر خروجی تابعِ گیت شما true باشد، نسخه بهینه‌شده اجرا می‌شود و در غیر این صورت، کدهای اصلی و قدیمی جاوااسکریپت اجرا خواهند شد.

تنظیم فایل پیکربندی:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      gating: {
        source: 'ReactCompilerFeatureFlags', // نام ماژول پرچم‌ها
        importSpecifierName: 'isCompilerEnabled', // نام تابع بررسی
      },
    }],
  ],
};

پیاده‌سازی تابع پرچم (Feature Flag): یک فایل مستقل بسازید و منطق بررسی دسترسی کاربر را در آن بنویسید:

// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
  // متصل به سیستم مدیریت پرچم‌های پروژه شما (مثلاً سرویس‌های آنلاین یا تنظیمات کاربر)
  return getFeatureFlag('react-compiler-enabled');
}

رفع اشکال در فرآیند پذیرش (Troubleshooting)

اگر در طول مسیر فعال‌سازی به مشکلی برخوردید، زنجیره زیر را دنبال کنید:

• خروج موقت: از دستور "use no memo" در بالای کامپوننت‌های مشکل‌دار استفاده کنید تا موقتاً از چرخه کامپایل خارج شوند.

• بررسی قوانین: به کمک پلاگین ESLint، کدهایی را که «قوانین راکت» (Rules of React) را نقض کرده‌اند پیدا و بازنویسی کنید.

• تغییر استراتژی: اگر فعال‌سازی پوشه‌ای برایتان سریع است، سطح کنترل را عقب‌تر آورده و از روش کامپوننت به کامپوننت ("use memo") استفاده کنید.