کامپایلر React را میتوان به صورت قدمبهقدم و تدریجی وارد پروژه کرد. این کار به شما اجازه میدهد تا ابتدا آن را روی بخشهای خاصی از کدهای خود تست کنید و سپس مابقی پروژه را ارتقا دهید.
چرا پذیرش تدریجی پیشنهاد میشود؟
استفاده از Overrides در بابل برای فعالسازی پوشه به پوشه
استفاده از دستور "use memo" برای فعالسازی کامپوننت به کامپوننت
استفاده از دستور "use no memo" برای مستثنی کردن کامپوننتها
استفاده از قابلیت Gating برای کنترل کامپایلر در زمان اجرا (Runtime)
اگرچه کامپایلر React برای بهینهسازی خودکار کل پروژه طراحی شده است، اما نیازی نیست آن را یکباره برای همه فایلها فعال کنید.
ایجاد اطمینان: شروع از بخشهای کوچک به شما اجازه میدهد تا رفتار درست برنامه، بهبود سرعت و کدهای کامپایل شده را در محیطهای حساس (مثل محیط عملیاتی/Production) بدون ریسک ارزیابی کنید.
مدیریت آسان خطاها: اگر کامپایلر با نقض «قوانین راکت» در کدهای قدیمی شما مواجه شود، به جای اصلاح یکباره کل پروژه، میتوانید خطاهای هر بخش را به صورت سیستماتیک و خردخرد برطرف کنید.
تستهای A/B: با فعال کردن کامپایلر روی بخشهای خاص، میتوانید تاثیر واقعی بهینهسازی آن را روی سرعت کاربران واقعی بسنجید.
قابلیت 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();
}
یادآوری: در این حالت، فراموش نکنید که باید این دستور را برای هر کامپوننت یا هوک جدیدی که میسازید و میخواهید بهینهسازی شود، به صورت دستی بنویسید.
قابلیت 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');
}
اگر در طول مسیر فعالسازی به مشکلی برخوردید، زنجیره زیر را دنبال کنید:
خروج موقت: از دستور "use no memo" در بالای کامپوننتهای مشکلدار استفاده کنید تا موقتاً از چرخه کامپایل خارج شوند.
بررسی قوانین: به کمک پلاگین ESLint، کدهایی را که «قوانین راکت» (Rules of React) را نقض کردهاند پیدا و بازنویسی کنید.
تغییر استراتژی: اگر فعالسازی پوشهای برایتان سریع است، سطح کنترل را عقبتر آورده و از روش کامپوننت به کامپوننت ("use memo") استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://react.dev/learn