Hermes — यह क्या है, React Native के लिए JS इंजन और कार्य सिद्धांत

Hermes क्या है

Hermes एक कॉम्पैक्ट ओपन-सोर्स JavaScript इंजन (MIT लाइसेंस) है जिसे Meta द्वारा React Native के लिए बनाया गया है और सीमित संसाधनों वाले मोबाइल उपकरणों पर चलने के लिए अनुकूलित किया गया है। Hermes का मुख्य नवाचार JIT कंपाइलेशन को छोड़कर AOT (Ahead-of-Time) को अपनाना है। React Native एप्लिकेशन बिल्ड चरण के दौरान, Metro Bundler कंपाइल किए गए JavaScript को Hermes CLI को भेजता है, जो इसे HBC (Hermes ByteCode) बाइटकोड में बदल देता है। यह बाइटकोड डिवाइस पर अतिरिक्त कंपाइलेशन के बिना सीधे इंजन द्वारा निष्पादित किया जाता है। यह दृष्टिकोण पूर्वानुमानित प्रदर्शन प्रदान करता है: कोई JIT वार्म-अप नहीं, कोई कंपाइलेशन रुकावट नहीं, कोई अतिरिक्त बैटरी खपत नहीं। Hermes मोबाइल उपकरणों की सीमाओं को ध्यान में रखकर डिज़ाइन किया गया है: छोटी RAM (1-4 GB), सीमित बिजली खपत और तेज़ कोल्ड स्टार्ट की आवश्यकता। Hermes का पहला सार्वजनिक रिलीज़ 2019 में हुआ था, और React Native 0.70 (2022) से शुरू होकर, यह इंजन Android पर मानक बन गया।

Hermes बनाम JavaScriptCore: इंजन तुलना

JavaScriptCore (JSC) मानक WebKit इंजन है जिसका उपयोग Safari और React Native संस्करण 0.70 से पहले करता है। JSC JIT कंपाइलेशन का समर्थन करता है, जो जटिल JavaScript संचालन के लिए उच्च प्रदर्शन प्रदान करता है। हालाँकि, JIT को वार्म-अप की आवश्यकता होती है: निष्पादन के पहले सेकंड धीमे होते हैं (इंटरप्रेटेड मोड), फिर JIT हॉट पथों को कंपाइल करता है। iOS पर, App Store नीतियों (डायनामिक कोड जनरेशन पर प्रतिबंध) के कारण JIT व्यावहारिक रूप से उपलब्ध नहीं है, इसलिए iOS पर JSC केवल इंटरप्रेटेड मोड में काम करता है — प्रदर्शन गिर जाता है। JSC का बाइनरी आकार बड़ा है (लगभग 10 MB) और JIT बुनियादी ढाँचे के कारण अधिक RAM की खपत करता है। Hermes JIT पर निर्भर नहीं करता है, जो स्टार्टअप (कोल्ड स्टार्ट) के तुरंत बाद पूर्वानुमानित प्रदर्शन प्रदान करता है। JSC ECMAScript मानक का अधिक पूर्ण समर्थन करता है (Proxy, BigInt, Reflect सहित), लेकिन अधिक संसाधन खपत की कीमत पर। React Native प्रोजेक्ट्स के लिए जहाँ कोल्ड स्टार्ट और छोटा आकार महत्वपूर्ण है — Hermes बेहतर है। भारी JS गणनाओं वाले प्रोजेक्ट्स (गेम्स, WebGL) के लिए — JSC उच्च पीक प्रदर्शन दे सकता है।

AOT कंपाइलेशन: पूर्व-निर्माण कैसे काम करता है

AOT कंपाइलेशन (Ahead-of-Time) Hermes में दो चरणों में होता है। पहले चरण में, Metro Bundler JavaScript फ़ाइलों को एक बंडल में एकत्र करता है और इसे Hermes CLI (उपयोगिता hermesc) को भेजता है। दूसरे चरण में, hermesc JavaScript AST को पार्स करता है, एक मध्यवर्ती प्रतिनिधित्व HIR (Hermes Intermediate Representation) उत्पन्न करता है और फिर बाइनरी HBC बाइटकोड उत्पन्न करता है। परिणाम — .hbc एक्सटेंशन वाली फ़ाइल जिसमें मूल JavaScript के बिना केवल बाइटकोड होता है। Hermes runtime HBC को सीधे लोड करता है, बिना पार्सिंग और कंपाइलेशन के। यह स्टार्टअप को मौलिक रूप से तेज़ करता है: हज़ारों JS लाइनों को पार्स करने (async) के बजाय, इंजन एक पूर्व-कंपाइल बाइनरी फॉर्मेट पढ़ता है। AOT आकार भी कम करता है: बाइटकोड JavaScript AST की तुलना में औसतन 30% अधिक कॉम्पैक्ट होता है। AOT का नुकसान — रनटाइम पर eval, new Function या डायनेमिक require को निष्पादित करने में असमर्थता — सभी मॉड्यूल बिल्ड चरण पर ज्ञात होने चाहिए।

# Hermes CLI को अलग से स्थापित करें
npm install hermes-engine

# JS को HBC बाइटकोड में कंपाइल करें
npx hermesc -emit-binary -out bundle.hbc bundle.js

# बाइटकोड आँकड़े
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# मूल JS बनाम HBC आकार
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Hermes प्रदर्शन मीट्रिक्स

Hermes का प्रदर्शन तीन प्रमुख मीट्रिक्स द्वारा मापा जाता है: Time-To-Interactive (TTI), APK/IPA आकार और RAM खपत। Meta डेटा के अनुसार, Android पर Hermes JSC की तुलना में TTI को 34% कम करता है: मध्य-श्रेणी के डिवाइस (Moto G7) पर 4.2 सेकंड से 2.8 सेकंड तक। कॉम्पैक्ट बाइटकोड और JIT लाइब्रेरी की अनुपस्थिति के कारण APK आकार 28% कम हो जाता है। समान लोड पर RAM की खपत औसतन 22% कम होती है — यह विशेष रूप से 2-3 GB RAM वाले उपकरणों के लिए महत्वपूर्ण है। iOS पर, लाभ और भी महत्वपूर्ण है: चूँकि JSC JIT का उपयोग नहीं कर सकता, Hermes 45% तक TTI सुधार प्रदान करता है। मीट्रिक्स Facebook Lite एप्लिकेशन के साथ Meta के परीक्षणों पर आधारित हैं। वास्तविक प्रोजेक्ट्स में, लाभ भिन्न होता है: सरल स्क्रीन (सूचियाँ, टेक्स्ट) के लिए Hermes अधिक सुधार देता है, भारी एनिमेशन के लिए — कम। प्रोफाइलिंग टूल: React Native Profiler + hermes profile --heap.

Hermes के साथ मेमोरी प्रोफाइलिंग

Hermes में Chrome DevTools के माध्यम से सुलभ एक अंतर्निहित मेमोरी प्रोफाइलर शामिल है। Metro के माध्यम से एप्लिकेशन से कनेक्ट करें, Memory टैब खोलें और स्नैपशॉट प्रकारों में Hermes (JavaScript) चुनें। Hermes तीन प्रकार के स्नैपशॉट का समर्थन करता है: Heap Snapshot (सभी ऑब्जेक्ट), Allocation Timeline (ऑब्जेक्ट जीवनकाल) और Allocation Sampling (नमूना प्रोफ़ाइल)। Hades GC GC रुकावटों को न्यूनतम तक कम करता है — औसतन 10 सेकंड के संचालन में एक 2-5ms की रुकावट, उसी अवधि में JSC के लिए 10-20ms की रुकावटों की तुलना में।

Hades GC कचरा संग्राहक

Hades GC Hermes में कचरा संग्राहक है, जो न्यूनतम रुकावटों के साथ मोबाइल परिदृश्यों के लिए डिज़ाइन किया गया है। JSC में mark-sweep GC के विपरीत, Hades समवर्ती (concurrent) संग्रह का उपयोग करता है: संग्राहक मुख्य निष्पादन थ्रेड के समानांतर काम करता है, इसे केवल छोटे अंतरालों के लिए रोकता है। Hades GC ढेर को पीढ़ियों में विभाजित करता है: युवा पीढ़ी (nursery) बार-बार और जल्दी एकत्र की जाती है (Scavenge), पुरानी पीढ़ी कम बार और छोटी रुकावटों के साथ एकत्र की जाती है। ढेर का आकार कॉन्फ़िगरेबल है: डिफ़ॉल्ट रूप से — एप्लिकेशन की उपलब्ध RAM का 2/3, न्यूनतम सीमा — 32 MB। Hades stop-the-world दृष्टिकोण का उपयोग नहीं करता है: पुरानी पीढ़ी का पूर्ण संग्रह भी 5-8ms से अधिक नहीं लेता है। संग्राहक विशिष्ट मोबाइल परिदृश्यों के लिए अनुकूलित है: कई अल्पकालिक ऑब्जेक्ट (अस्थायी स्ट्रिंग्स, React fiber ऑब्जेक्ट), कुछ दीर्घकालिक। गहन ऑब्जेक्ट निर्माण (सूचियाँ, एनिमेशन) वाले अनुप्रयोगों के लिए, Hades JSC की तुलना में चिकना FPS प्रदान करता है।

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

Hermes को सक्षम करना React Native संस्करण और प्लेटफ़ॉर्म पर निर्भर करता है। React Native 0.70 से शुरू होकर, नए प्रोजेक्ट्स में Android के लिए Hermes डिफ़ॉल्ट रूप से सक्षम है। iOS के लिए, Hermes वैकल्पिक है। Android पर सक्षम करने के लिए: फ़ाइल android/app/build.gradle में project.ext.react.enableHermes ब्लॉक में enableHermes: true सेट करें। iOS के लिए: use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true) के माध्यम से Podfile में hermes_enabled को true पर सेट करें। सक्षम करने के बाद, pod install चलाएँ। मौजूदा प्रोजेक्ट्स के लिए, लाइब्रेरी संगतता जाँचें: Hermes Proxy, eval और कुछ ES2021 सुविधाओं का समर्थन नहीं करता है। कॉन्फ़िगरेशन सत्यापित करने के लिए npx react-native info का उपयोग करें। Hermes और JSC के बीच स्विच करने के लिए, फ़्लैग बदलें और क्लीन रीबिल्ड करें।

// android/app/build.gradle — Hermes सक्षम करें
project.ext.react = [
    enableHermes: true,
    cliPath: "node_modules/react-native/cli.js"
]

// iOS/Podfile — iOS पर Hermes सक्षम करें
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'MyApp' do
  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
end

Hermes सीमाएँ: क्या समर्थित नहीं है

Hermes की मुख्य सीमाएँ JIT की कमी से संबंधित हैं। Hermes समर्थन नहीं करता है: Proxy और Reflect API (MobX, Vue, कुछ state मैनेजर्स में उपयोग किया जाता है), BigInt (बड़ी संख्याएँ), Symbol.toStringTag, WeakRef और FinalizationRegistry। eval और new Function फ़ंक्शन रनटाइम के दौरान अपवाद उत्पन्न करते हैं। this तर्क के साथ Array.prototype.flat और flatMap विधियों के कॉलबैक सीमाओं के साथ काम करते हैं। समय क्षेत्रों के साथ ISO 8601 दिनांक प्रारूप पूरी तरह से संसाधित नहीं होते हैं। इनमें से अधिकांश सीमाएँ सामान्य React Native एप्लिकेशन को प्रभावित नहीं करती हैं: React और React Native ES सुविधाओं के एक सीमित सेट का उपयोग करते हैं। यदि किसी लाइब्रेरी को Proxy की आवश्यकता है (उदाहरण के लिए, Proxy के साथ MobX 6+), तो configure({ useProxies: false }) का उपयोग करें या कोई विकल्प चुनें। मौजूदा कोड की संगतता जाँचने के लिए, अपने बंडल पर npx hermesc -check चलाएँ — यह असमर्थित सुविधाओं की सूची दिखाएगा।

• Proxy / Reflect — लागू नहीं; Proxy की आवश्यकता वाली लाइब्रेरी को फ़ॉलबैक मोड चाहिए
• BigInt — उपलब्ध नहीं; बड़ी संख्याओं के लिए bignumber.js लाइब्रेरी का उपयोग करें
• eval / new Function — कॉल करने पर throw; सभी मॉड्यूल स्थिर होने चाहिए
• WeakRef / FinalizationRegistry — समर्थित नहीं; कोई विकल्प नहीं
• Symbol.toStringTag — अनदेखा किया जाता है; instanceof सही ढंग से काम करता है