सभी को नमस्कार! इस लेख में मैं आपको बताना चाहूंगा कि कैसे आप hmpl जैसी टेम्प्लेट भाषा की मदद से जावास्क्रिप्ट फ़ाइलों के आकार को कई गुना कम कर सकते हैं।

लेख में दिखाई देने वाला तकनीकी दृष्टिकोण नया नहीं है, लेकिन फिर भी आज इतना लोकप्रिय है कि इसके बारे में बात करना उचित है।

जावास्क्रिप्ट फ़ाइल का आकार कम करने से पेज क्लाइंट पर तेज़ी से लोड हो सकेंगे। यदि हम आधुनिक एसपीए लेते हैं, तो यह पता चलता है कि फ़ाइल का आकार, सभी लघुकरणों को ध्यान में रखते हुए, अभी भी काफी बड़ा है। बेशक, एक बार जब आप किसी पेज को एक बार लोड करते हैं, तो उसे नेविगेट करना आसान हो जाता है, लेकिन खराब इंटरनेट कनेक्शन के साथ पहली बार लोड होने का समय एक सेकंड से लेकर, मान लीजिए, कई मिनट तक हो सकता है। कुछ ग्राहक इतना लंबा इंतजार करना चाहेंगे।

यूआई बनाने के लिए अधिकांश फ्रेमवर्क और लाइब्रेरी का उपयोग करते समय, आपको बहुत सारे बॉयलरप्लेट कोड लिखने होंगे। प्रत्येक प्रतीक स्मृति स्थान लेता है। आइए एक Vue.js क्लिकर लें:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

एक अत्यंत सरल क्लिकर, लेकिन इसके लिए भी js में उचित मात्रा में कोड की पंक्तियों की आवश्यकता होती है, उन मामलों की तो बात ही छोड़ दें जब एप्लिकेशन कम या ज्यादा बड़ा हो।

दो अल्पविरामों के बिना भी, कुछ बाइट्स कम हो सकते हैं

यह न केवल Vue के साथ एक समस्या है, बल्कि अन्य फ्रेमवर्क और लाइब्रेरी के साथ भी है जो समान तरीके से काम करते हैं। लेकिन, यही एकमात्र बिंदु नहीं है। बड़ी संख्या में अतिरिक्त मॉड्यूल हैं जो उनके पास जाते हैं, और समान संख्या में अतिरिक्त मॉड्यूल उनके पास जाते हैं, और इसी तरह "अनंत" तक।

वास्तव में, इस समस्या का एक समाधान बहुत पहले प्रस्तावित किया गया था और यह बहुत ही सरल है - यह सर्वर पर यूआई तैयार करना और इसे क्लाइंट पर लोड करना है। इसके लिए धन्यवाद, एप्लिकेशन फ़ाइलों का आकार काफी कम किया जा सकता है। यह बिल्कुल वही विचार है जिसका उपयोग एचएमपीएल में किया जाता है।

उदाहरण में, मैं एक क्लिकर बनाने का भी प्रयास करूंगा, लेकिन hmpl.js का उपयोग करके।

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

जैसा कि आप देख सकते हैं, यूआई वही होगा, लेकिन फ़ाइल का आकार थोड़ा छोटा होगा।

भले ही आप फ़ाइलों को छोटा कर दें और टेम्पलेट्स से सभी अनावश्यक रिक्त स्थान हटा दें, हो सकता है कि फ़ाइलें बराबर या कुछ बड़ी होंगी, लेकिन यह केवल छोटे उदाहरणों पर एक धारणा है। यदि हम बड़े अनुप्रयोग लेते हैं, तो यह स्पष्ट है कि इस दृष्टिकोण से बहुत कम js होंगे।

जैसा कि उदाहरण से देखा जा सकता है, यदि वांछित है, तो एप्लिकेशन स्थिति की गणना और भंडारण की कार्यक्षमता को सर्वर पर ले जाया जा सकता है।

जैसा कि आप उदाहरण से देख सकते हैं, यदि वांछित हो, तो एप्लिकेशन स्थिति की गणना और भंडारण की कार्यक्षमता को सर्वर पर ले जाया जा सकता है। यह स्पष्ट है कि यदि बड़ी संख्या में उपयोगकर्ता हैं, तो यह बस सर्वर को डाउन कर देगा, लेकिन यह तथ्य कि उपयोगकर्ता इंटरफ़ेस समान है, महत्वपूर्ण है।

हां, निश्चित रूप से, इस पद्धति में न केवल इतना नुकसान है, बल्कि यूआई की पुन: प्रयोज्यता भी है, यूआई को कैसे कैश किया जाए ताकि सब कुछ सौ बार लोड न हो और भी बहुत कुछ। एक विकल्प महत्वपूर्ण है, जिसे यदि ठीक से कॉन्फ़िगर किया जाए, तो अधिकांश आधुनिक समाधानों के साथ प्रतिस्पर्धा कर सकता है।

इस लेख को पढ़ने के लिए आप सभी का बहुत-बहुत धन्यवाद!

सामग्रियों की सूची:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html