Hermes: विशेषताएँ और React Native के लिए अनुकूलन

Hermes क्या है?

Hermes एक कॉम्पैक्ट JavaScript इंजन है जिसे Meta टीम ने विशेष रूप से React Native के लिए बनाया है। इसकी घोषणा 2019 में JavaScriptCore (JSC) के विकल्प के रूप में की गई थी, जो React Native में डिफ़ॉल्ट रूप से उपयोग किया जाता था। Hermes का मुख्य लक्ष्य मोबाइल एप्लिकेशनों के लिए सबसे तेज़ संभव स्टार्टअप प्रदान करना है, विशेषकर सीमित संसाधनों वाले Android पर।

Hermes की प्रमुख विशेषता पूर्व-संकलन (AOT — Ahead-of-Time) है। पारंपरिक JS इंजनों के विपरीत जो रनटाइम पर कोड संकलित करते हैं (JIT — Just-in-Time), Hermes JavaScript को ऐप बिल्ड चरण के दौरान बाइटकोड में संकलित करता है। इसका मतलब है कि डिवाइस पर कोई संकलन नहीं होता — बाइटकोड तुरंत Hermes वर्चुअल मशीन द्वारा निष्पादित किया जाता है।

Hermes एक सार्वभौमिक JS इंजन नहीं है — यह केवल React Native परिदृश्यों के लिए अनुकूलित है। इसमें मोबाइल विकास में आवश्यक न होने वाली सुविधाओं का अभाव है: eval, जनरेटर, और कुछ ES6 सुविधाएँ। यह इंजन को अधिक कॉम्पैक्ट और तेज़ बनाने की अनुमति देता है। Meta के अनुसार, Hermes का आकार संपीड़ित रूप में लगभग 200–300 KB है, जो JSC (लगभग 2–3 MB) से काफी छोटा है।

Hermes आर्किटेक्चर और बाइटकोड

Hermes आर्किटेक्चर JIT संकलक की अनुपस्थिति में पारंपरिक JS इंजनों से भिन्न है। इसके बजाय, Hermes एक कुशल वर्चुअल मशीन (VM) का उपयोग करता है जो पूर्व-संकलित बाइटकोड को निष्पादित करती है। JIT को छोड़ने से तीन प्रमुख लाभ मिलते हैं: पूर्वानुमानित प्रदर्शन, कम मेमोरी खपत, और कम स्टार्टअप समय।

Hermes बाइटकोड JavaScript कोड का एक कॉम्पैक्ट प्रतिनिधित्व है जो तेज़ निष्पादन के लिए अनुकूलित है। बिल्ड चरण (Metro के माध्यम से) के दौरान, JavaScript फ़ाइलें .hbc (Hermes Bytecode) फ़ाइलों में संकलित की जाती हैं। ऐप इन फ़ाइलों को लोड करता है, और Hermes VM बिना अतिरिक्त संकलन के उन्हें निष्पादित करता है। बिल्ड प्रक्रिया hermes-transformer प्लगइन के माध्यम से Metro में एकीकृत है।

कोड प्रसंस्करण चरण

Hermes में JavaScript प्रसंस्करण प्रवाह तीन चरणों से मिलकर बना है: 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 में पैक किया जाता है। जब ऐप शुरू होता है, Hermes VM बाइटकोड लोड करता है और लगभग तुरंत निष्पादन शुरू करता है — JIT वार्म-अप समय की आवश्यकता नहीं है, जो V8 और JSC के लिए विशिष्ट है।

Hermes बनाम JSC: तुलना

Hermes और JavaScriptCore (JSC) की तुलना यह समझने में मदद करती है कि कब कौन सा इंजन चुनना है। JSC Apple का एक पूर्ण-विशेषताओं वाला JS इंजन है, जो Safari में उपयोग किया जाता है। Hermes React Native के लिए एक विशिष्ट इंजन है। उनके बीच का चुनाव प्रोजेक्ट की प्राथमिकताओं पर निर्भर करता है।

Hermes स्टार्टअप गति और मेमोरी खपत में जीतता है लेकिन जटिल गणना प्रदर्शन में JSC से पीछे है। JSC का JIT संकलन निष्पादन के दौरान हॉट कोड पथों को अनुकूलित करता है, जिससे CPU-गहन संचालनों पर लाभ मिलता है। एक विशिष्ट React Native ऐप के लिए, जहाँ UI अपडेट और नेविगेशन प्राथमिक कार्यभार बनाते हैं, Hermes तेज़ स्टार्टअप के माध्यम से बेहतर उपयोगकर्ता अनुभव प्रदान करता है।

React Native के लिए Hermes अनुकूलन

Hermes में React Native के लिए विशिष्ट कई अनुकूलन शामिल हैं। मुख्य है JSI (JavaScript Interface) के साथ एकीकरण। Hermes मूल रूप से JSI का समर्थन करता है, जिससे बिना अतिरिक्त परतों के नई React Native आर्किटेक्चर (Fabric + Turbo Modules) का उपयोग संभव होता है। यह Hermes और नई आर्किटेक्चर को अधिकतम प्रदर्शन के लिए आदर्श जोड़ी बनाता है।

मेमोरी प्रबंधन

Hermes मोबाइल उपकरणों के लिए अनुकूलित पीढ़ीगत कचरा संग्रहक (generational GC) का उपयोग करता है। JSC के विपरीत, जहाँ कचरा संग्रहण UI में ध्यान देने योग्य रुकावट (jank) पैदा कर सकता है, Hermes GC को फ्रेमों के बीच छोटे भागों में करता है, जिससे उपयोगकर्ता अनुभव पर प्रभाव कम होता है। Meta के अनुसार, विशिष्ट React Native परिदृश्यों में Hermes में GC रुकावटें JSC की तुलना में 2–3 गुना छोटी होती हैं।

आलसी आवश्यकता और स्थिरांक

Hermes आलसी मॉड्यूल लोडिंग का समर्थन करता है — एक JavaScript मॉड्यूल तभी संकलित होता है जब वास्तव में आवश्यकता हो। यह बाइटकोड आकार को कम करता है और स्टार्टअप को गति देता है। इसके अतिरिक्त, 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 के खिलाफ मुख्य आपत्तियों में से एक को समाप्त करता है, जहाँ डिबगिंग सीमित थी।

React Native प्रोजेक्ट में Hermes सेटअप

Hermes का सेटअप React Native संस्करण पर निर्भर करता है। React Native 0.70 से शुरू, Hermes नए प्रोजेक्ट्स के लिए डिफ़ॉल्ट रूप से सक्षम है। पहले बनाए गए प्रोजेक्ट्स के लिए, या इंजनों के बीच स्विच करते समय, कॉन्फ़िगरेशन बिल्ड सेटिंग्स के माध्यम से किया जाता है।

Android सेटअप

Android के लिए, Hermes को android/app/build.gradle फ़ाइल में hermesEnabled फ़्लैग के माध्यम से सक्षम किया जाता है। iOS के लिए, कॉन्फ़िगरेशन Podfile में :hermes_enabled वेरिएबल के माध्यम से किया जाता है। कॉन्फ़िगरेशन बदलने के बाद, आपको पॉड्स को पुनः स्थापित करने और प्रोजेक्ट को पुनः बनाने की आवश्यकता है।

// android/app/build.gradle — Hermes सक्षम करें
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — Hermes सक्षम करें
hermes_enabled = true
pod 'hermes-engine'

यह सत्यापित करने के लिए कि आपके ऐप में Hermes चल रहा है, Android पर adb logcat | grep Hermes चलाएँ या iOS पर Xcode कंसोल जाँचें। जब ऐप शुरू होता है, Hermes एक संदेश आउटपुट करता है जैसे “Hermes VM initialized” या समान। आप JavaScript कोड में globalThis.HermesInternal भी जाँच सकते हैं — यदि Hermes सक्रिय है, तो यह गुण उपलब्ध होगा।

// जाँचें कि Hermes चल रहा है या नहीं
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes इंजन सक्रिय');
  console.log(
    'संस्करण:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes सक्रिय नहीं (JSC पर फ़ॉलबैक)');
}