Hermes: چیست، قابلیت‌ها و بهینه‌سازی برای React Native

Hermes چیست؟

Hermes — یک موتور جاوااسکریپت جمع‌وجور است که توسط تیم Meta به طور خاص برای React Native ساخته شده است. این موتور در سال ۲۰۱۹ به عنوان جایگزینی برای JavaScriptCore (JSC) که به طور پیش‌فرض در React Native استفاده می‌شد معرفی شد. هدف اصلی Hermes اطمینان از راه‌اندازی سریع‌ترین برنامه‌ها در دستگاه‌های موبایل، به ویژه در Android با منابع محدود است.

ویژگی کلیدی Hermes کامپایل قبلی (AOT — Ahead-of-Time) است. برخلاف موتورهای سنتی JS که کد را در زمان اجرا کامپایل می‌کنند (JIT — Just-in-Time)، Hermes جاوااسکریپت را در مرحله ساخت برنامه به بایت‌کد کامپایل می‌کند. این بدان معناست که در دستگاه کامپایلی انجام نمی‌شود — بایت‌کد بلافاصله توسط ماشین مجازی Hermes اجرا می‌شود.

Hermes یک موتور JS همه‌منظوره نیست — فقط برای سناریوهای React Native بهینه‌سازی شده است. قابلیت‌هایی که در توسعه موبایل مورد نیاز نیستند: eval، ژنراتورها، برخی ویژگی‌های ES6 در آن وجود ندارند. این باعث می‌شود موتور جمع‌وجورتر و سریع‌تر شود. به گفته Meta، اندازه Hermes حدود ۲۰۰–۳۰۰ کیلوبایت به صورت فشرده است که به طور قابل توجهی کمتر از JSC (حدود ۲–۳ مگابایت) است.

معماری Hermes و بایت‌کد

معماری Hermes با نبود کامپایلر JIT از موتورهای سنتی JS متفاوت است. در عوض Hermes از یک ماشین مجازی کارآمد (VM) استفاده می‌کند که بایت‌کد از پیش کامپایل شده را اجرا می‌کند. صرف‌نظر از JIT سه مزیت کلیدی به همراه دارد: عملکرد قابل پیش‌بینی، مصرف حافظه کمتر و کاهش زمان راه‌اندازی.

بایت‌کد Hermes — نمایش فشرده کد جاوااسکریپت است که برای اجرای سریع بهینه‌سازی شده است. در مرحله ساخت (از طریق Metro) فایل‌های جاوااسکریپت به فایل‌های .hbc (Hermes Bytecode) کامپایل می‌شوند. برنامه این فایل‌ها را بارگذاری می‌کند و VM Hermes آنها را بدون کامپایل اضافی اجرا می‌کند. فرایند ساخت از طریق پلاگین hermes-transformer در Metro ادغام شده است.

مراحل پردازش کد

فرایند پردازش جاوااسکریپت در Hermes از سه مرحله تشکیل شده است: Parse — تجزیه نحوی کد منبع، Compile — ترجمه به بایت‌کد، Execute — اجرای بایت‌کد توسط ماشین مجازی. دو مرحله اول در مرحله ساخت انجام می‌شود، مرحله سوم — در دستگاه. این اساساً با JSC متفاوت است، جایی که هر سه مرحله در دستگاه انجام می‌شود.

# کامپایل بایت‌کد Hermes در حین ساخت
hermes -emit-binary -out index.hbc index.js

# اندازه بایت‌کد تولید شده را بررسی کنید
ls -lh index.hbc

# آمار بایت‌کد را نمایش دهید
hermes -dump-bytecode index.hbc

# بایت‌کد را برای تولید بهینه کنید
hermes -O index.js -emit-binary -O target.hbc

پس از کامپایل، تمام فایل‌های .hbc به همراه کد بومی در APK یا IPA بسته‌بندی می‌شوند. هنگام راه‌اندازی برنامه، VM Hermes بایت‌کد را بارگذاری می‌کند و تقریباً بلافاصله اجرا را آغاز می‌کند — برخلاف V8 و JSC نیازی به زمان گرم‌شدن JIT نیست.

Hermes در مقابل JSC: مقایسه

مقایسه Hermes و JavaScriptCore (JSC) به درک اینکه چه زمانی کدام موتور را انتخاب کنید کمک می‌کند. JSC — یک موتور JS کامل از اپل است که در Safari استفاده می‌شود. Hermes — یک موتور تخصصی برای React Native. انتخاب بین آنها به اولویت‌های پروژه بستگی دارد.

Hermes در سرعت راه‌اندازی و مصرف حافظه برنده است، اما در عملکرد اجرای محاسبات پیچیده از JSC عقب‌تر است. کامپایل JIT JSC بخش‌های داغ کد را در زمان اجرا بهینه‌سازی می‌کند که در عملیات‌های سنگین CPU مزیت ایجاد می‌کند. در یک برنامه معمولی React Native، جایی که به‌روزرسانی‌های UI و ناوبری بار اصلی را تشکیل می‌دهند، Hermes به لطف راه‌اندازی سریع تجربه کاربری بهتری ارائه می‌دهد.

بهینه‌سازی‌های Hermes برای React Native

Hermes شامل چندین بهینه‌سازی خاص برای React Native است. اصلی‌ترین آنها ادغام با JSI (JavaScript Interface) است. Hermes به صورت بومی از JSI پشتیبانی می‌کند که امکان استفاده از معماری جدید React Native (Fabric + Turbo Module) را بدون لایه‌های اضافی فراهم می‌کند. این Hermes و معماری جدید را به یک جفت ایده‌آل برای حداکثر عملکرد تبدیل می‌کند.

مدیریت حافظه

Hermes از زباله‌روب با استراتژی نسلی (generational GC) بهینه‌سازی شده برای دستگاه‌های موبایل استفاده می‌کند. برخلاف JSC، جایی که جمع‌آوری زباله می‌تواند باعث مکث‌های قابل توجه در UI (jank) شود، Hermes GC را در بخش‌های کوچک بین فریم‌ها انجام می‌دهد و تأثیر بر تجربه کاربری را به حداقل می‌رساند. به گفته Meta، مکث‌های GC در Hermes ۲–۳ برابر کوتاه‌تر از JSC در سناریوهای معمولی React Native است.

بارگذاری تنبل و ثابت‌ها

Hermes از بارگذاری تنبل ماژول‌ها پشتیبانی می‌کند — ماژول جاوااسکریپت تنها زمانی که واقعاً نیاز باشد کامپایل می‌شود. این اندازه بایت‌کد را کاهش می‌دهد و راه‌اندازی را سرعت می‌بخشد. علاوه بر این، Hermes عبارات ثابت را در مرحله کامپایل محاسبه می‌کند و در صورت امکان فراخوانی توابع را با مقادیر ثابت جایگزین می‌کند.

// مثال بهینه‌سازی‌های خاص Hermes

// 1. Hermes عبارات ثابت را درون‌ریزی می‌کند
const TAX_RATE = 0.07;
const price = 100;
// Hermes از قبل محاسبه می‌کند: TAX_RATE * price در حین کامپایل
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes زنجیره‌های دسترسی به ویژگی‌ها را بهینه می‌کند
const config = { api: { timeout: 5000 } };
// Hermes دسترسی به config.api را داخلی کش می‌کند
const timeout = config.api.timeout;
fetch(url, { timeout });

توجه به این نکته مهم است که Hermes از اشکال‌زدایی از طریق Chrome DevTools پشتیبانی می‌کند (از نسخه Hermes 0.12). توسعه‌دهنده می‌تواند از ابزارهای آشنا استفاده کند: نقاط شکست، پروفایل حافظه، بازرسی متغیرها. این یکی از اعتراضات اصلی به Hermes در نسخه‌های اولیه را برطرف می‌کند، زمانی که اشکال‌زدایی محدود بود.

تنظیم Hermes در پروژه React Native

تنظیم Hermes به نسخه React Native بستگی دارد. از React Native 0.70 Hermes به طور پیش‌فرض برای پروژه‌های جدید فعال است. برای پروژه‌هایی که قبلاً ایجاد شده‌اند یا هنگام نیاز به جابجایی بین موتورها، تنظیمات از طریق پیکربندی ساخت انجام می‌شود.

تنظیم برای Android

برای Android، Hermes در فایل android/app/build.gradle از طریق پرچم hermesEnabled فعال می‌شود. برای iOS، تنظیمات در Podfile از طریق متغیر :hermes_enabled انجام می‌شود. پس از تغییر پیکربندی، باید podها را دوباره نصب کرده و پروژه را بازسازی کنید.

// android/app/build.gradle — فعال‌سازی Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — فعال‌سازی Hermes
hermes_enabled = true
pod 'hermes-engine'

برای بررسی اینکه Hermes در برنامه استفاده می‌شود، adb logcat | grep Hermes را در Android اجرا کنید یا کنسول Xcode را در iOS بررسی کنید. هنگام راه‌اندازی برنامه، Hermes پیام «Hermes VM initialized» یا مشابه آن را نمایش می‌دهد. همچنین می‌توانید globalThis.HermesInternal را در کد جاوااسکریپت اجرا کنید — اگر Hermes فعال باشد، این ویژگی در دسترس خواهد بود.

// بررسی فعال بودن Hermes
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ موتور Hermes فعال است');
  console.log(
    'نسخه:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes فعال نیست (بازگشت به JSC)');
}