🤔 🚄 🤘🏽 ब्राउज़र में ईएस 6 मॉड्यूल: क्या वे तैयार हैं या नहीं? 👷🏻 🤱🏿 📥

क्या आपने किसी ब्राउज़र में ES6 मॉड्यूल के उपयोग के बारे में सुना है? दरअसल, ये साधारण ईएस 6 मॉड्यूल हैं। वे केवल ब्राउज़र के लिए इरादा कोड में लागू होते हैं।

अगर किसी को पता नहीं है - यह है कि यह कैसे दिखता है।

एक पृष्ठ है index.html:

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
  
    <script type="module" src="index.mjs"></script>
    <!--     "module" -->
  </body>
</html>

एक फ़ाइल index.mjsपृष्ठ से जुड़े एक मॉड्यूल का प्रतिनिधित्व करती है:

import { doSomething } from './utils.mjs';

doSomething('Make me a sandwich');

यह मॉड्यूल, बदले में, doSomethingमॉड्यूल से फ़ंक्शन आयात करता है utils.mjs:

export const doSomething = message => {
  console.log('No.');
};

ES6 मॉड्यूल कई वर्षों से है। और शायद आप उन्हें आज़माने के बारे में सोच रहे हैं। मैंने उन्हें अपने प्रोजेक्ट में लगभग एक महीने तक इस्तेमाल किया। उसी समय, मैं इस नतीजे पर पहुँचा कि ...

सस्पेंस!

मॉड्यूल के लिए ब्राउज़र समर्थन के बारे में

इससे पहले कि मैं क्या समझता हूं, इसके बारे में बात करने से पहले, मैं सुझाव देता हूं कि मॉड्यूल के लिए ब्राउज़र समर्थन पर एक नज़र डालें। मैं इस सामग्री को 2020 की शुरुआत में लिख रहा हूं, इसलिए मॉड्यूल के लिए समर्थन का स्तर 90% काफी प्रभावशाली है।

Caniuse.com के अनुसार ब्राउज़रों के साथ मॉड्यूल के लिए समर्थन,

मैं इन 90% (मैं 10% उपयोगकर्ताओं की आवश्यकताओं को ध्यान में नहीं रखता हूं) से काफी खुश हूं, हालांकि आप अधिक जिम्मेदार होना चाहते हैं। लेकिन, इस पर विचार करते हुए, यदि आपका प्रोजेक्ट IE, या UC, या ओपेरा मिनी के लिए डिज़ाइन नहीं किया गया है, तो समर्थन के इस स्तर का मतलब है कि आपके लगभग 100% लक्षित दर्शक बिना किसी समस्या के आपके प्रोजेक्ट के साथ काम कर पाएंगे।

सच है, मॉड्यूल के लिए ब्राउज़र समर्थन केवल शुरुआत है। यहाँ मैं उन तीन प्रश्नों का उत्तर खोजना चाहता हूं जो मॉड्यूल की ओर मेरी यात्रा की शुरुआत में उत्पन्न हुए:

क्या ब्राउज़रों में मॉड्यूल के उपयोग के कोई फायदे हैं?
विपक्ष के बारे में क्या?
मुझे यकीन है कि मेरे पास तीसरा सवाल था, लेकिन अब मैं इसे याद नहीं रख सकता।

चलिए इसका पता लगाते हैं ...

ब्राउज़रों में मॉड्यूल का उपयोग करने के क्या फायदे हैं?

यह शुद्ध जावास्क्रिप्ट है! कोई असेंबली प्रोजेक्ट पाइपलाइन, कोई 400-लाइन वेबपैक कॉन्फ़िगरेशन फ़ाइल, कोई बैबेल, कोई प्लगइन्स और प्रीसेट और कोई अतिरिक्त 45 npm मॉड्यूल नहीं। केवल आप और आपका कोड।

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

इसलिए। ES6 मॉड्यूल के फायदे शुद्ध जावास्क्रिप्ट हैं, यह असेंबली, प्रोजेक्ट कॉन्फ़िगरेशन की कमी और निर्भरता की अस्वीकृति है जो अनावश्यक हो गए हैं। और क्या? क्या कुछ और है?

नहीं, और कुछ नहीं।

ब्राउज़रों में मॉड्यूल का उपयोग करने के नुकसान क्या हैं?

मॉड्यूल और बंडल की ofComparison

किसी ब्राउज़र में ES6 मॉड्यूल का उपयोग करना है या नहीं, इस बारे में सोचते समय, आपको वास्तव में वेबपैक, पार्सल या रोलअप जैसे मॉड्यूल और बंडल का उपयोग करना होगा।

आप (शायद) दोनों का उपयोग कर सकते हैं, लेकिन वास्तव में, यदि आप <script type="module">बंडल के माध्यम से कोड को चलाने की योजना बनाते हैं, तो बंडल फ़ाइलों को लोड करने के लिए डिज़ाइन का उपयोग करने का कोई कारण नहीं है ।

इसलिए, इस धारणा के आधार पर कि कोई एक बंडलर के बजाय ES6 मॉड्यूल का उपयोग करने की संभावना पर विचार कर रहा है, यहां वह है जो उसे छोड़ना होगा:

तैयार कोड की न्यूनतम।
अत्याधुनिक जावास्क्रिप्ट सुविधाएँ।
सिंटैक्स जो जावास्क्रिप्ट सिंटैक्स (प्रतिक्रिया, टाइपस्क्रिप्ट, आदि) से अलग है।
Npm मॉड्यूल।
कैशिंग

इस सूची के पहले तीन पैराग्राफ पर अधिक विस्तार से विचार करें।

▍ फ़ाइल का आकार

मेरी परियोजना का आकार, जो मॉड्यूल का उपयोग करता है, 34 Kb है। चूंकि मैं प्रोजेक्ट बिल्ड चरण का उपयोग नहीं करता हूं, इसलिए नेटवर्क पर प्रेषित कोड में बहुत लंबे चर नाम हैं; इसमें कई बेहतरीन टिप्पणियां हैं। इसके अलावा, यह छोटी फ़ाइलों के एक पूरे समूह का प्रतिनिधित्व करता है, जो डेटा संपीड़न के मामले में बहुत अच्छा नहीं है।

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

डेटा संपीड़न एक और समस्या की ओर हमारा ध्यान आकर्षित करता है: जिस तरह से फ़ाइलों को व्यवस्थित किया जाता है (विकास सुविधा के अर्थ में) सीधे जिस तरह से फ़ाइलों को नेटवर्क पर स्थानांतरित किया जाता है। और जिस तरह से विकास के दौरान फाइलें व्यवस्थित होती हैं जरूरी नहीं कि आप उन्हें साइट में कैसे देखना चाहते हैं। उदाहरण के लिए, 150 मॉड्यूल (फाइलें) किसी परियोजना पर काम करते समय समझ में आ सकती हैं। और ब्राउज़र में स्थानांतरित की गई समान सामग्री को 12 बंडलों में व्यवस्थित करने के लिए उचित ठहराया जा सकता है।

मैं इस विचार की व्याख्या करूंगा। मैं इस तथ्य के बारे में बात नहीं कर रहा हूं कि मॉड्यूल का उपयोग करने का मतलब है कि फ़ाइलों को बंडल और खनन नहीं किया जा सकता है (तथ्य यह है कि ऐसा नहीं किया जा सकता है यह एक भ्रम है)। मेरा मतलब सिर्फ इतना है कि इससे दोनों को कोई मतलब नहीं है।

हाँ, यहाँ एक अजीब अवलोकन है। मेरे आवेदन में, जब तक मैंने यह खंड नहीं लिखा था, तब तक मॉड्यूल का उपयोग किया जाता था (मैं जोर देता हूं!)। मैंने सही विधानसभा आकार की गणना करने के लिए पार्सल स्थापित किया। और अब मुझे सामान्य मॉड्यूल पर लौटने का कोई कारण नहीं दिखता है। खैर, क्या यह दिलचस्प नहीं है!

▍लाइफ बिना ट्रांसप्लांटेशन

इन वर्षों में, मैं नवीनतम जावास्क्रिप्ट सिंटैक्स कंस्ट्रक्शंस का उपयोग करने के लिए और अद्भुत बैबल टूल का उपयोग कर रहा हूं, जो उन्हें कोड में बदल देता है जिसे सभी ब्राउज़र समझते हैं। मुझे इसकी इतनी आदत हो गई है कि मैं कम से कम ब्राउज़र सपोर्ट के बारे में कम से कम सोचता था (बेशक, DOM और CSS के अपवाद के साथ)।

जब मैंने पहली बार कोशिश की type=«module», तो मैं खुद सब कुछ करने जा रहा था। मेरा लक्ष्य ताज़ा ब्राउज़र था, इसलिए मैंने सोचा कि मैं आधुनिक जावास्क्रिप्ट का उपयोग कर सकता हूं, जिसका मैं उपयोग कर रहा हूं।

लेकिन हकीकत इतनी रसभरी नहीं थी। निम्नलिखित प्रश्नों के उत्तर जल्दी और बिना देखे कहीं भी देने का प्रयास करें। एज सपोर्ट करता हैflatMap()? क्या सफारी विनाशकारी असाइनमेंट (वस्तुओं और सरणियों) का समर्थन करती है? क्या अंतिम फ़ंक्शन तर्क के बाद क्रोम समर्थन करता है? क्या फ़ायरफ़ॉक्स एक्सपोज़रिएशन का समर्थन करता है?

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

इसका मतलब यह भी है कि मैं सरणी पद्धति के आगमन के बाद से सबसे उल्लेखनीय जावास्क्रिप्ट नवाचार का उपयोग करने में सक्षम नहीं होगा slice()- तथाकथित वैकल्पिक अनुक्रम ऑपरेटर । मैंने जादुई डिजाइनों का इस्तेमाल कियाprop?.valueबस एक महीने के लिए (पल से रिएक्ट ऐप बनाएं टूल ने उन्हें बिना किसी अतिरिक्त सेटिंग्स के समर्थन देना शुरू कर दिया)। लेकिन उनके बिना काम करना मेरे लिए पहले से ही असुविधाजनक है।

▍ कैशिंग बोझ

मेरे लिए सबसे बड़ी ठोकर थी कैशिंग। वास्तव में, यह तथ्य कि कैशिंग समस्या का समाधान काफी दिलचस्प निकला, यह मुख्य कारण है कि मैंने इस सामग्री को लिखने का फैसला किया।

जैसा कि आप सुनिश्चित हैं, आप जानते हैं, जब सामग्री को एक बंडलर का उपयोग करके संसाधित किया जाता है, जिसके परिणामस्वरूप प्रत्येक फ़ाइल को एक अद्वितीय नाम मिलता है - जैसे index.38fd9e.js। इस नाम की फ़ाइल की सामग्री कभी नहीं (कभी नहीं) बदलती है। इसलिए, यह असीमित अवधि के लिए ब्राउज़र द्वारा कैश किया जा सकता है। यदि ऐसी फाइल एक बार डाउनलोड हो जाती है, तो आपको इसे दोबारा डाउनलोड नहीं करना पड़ेगा।

यह एक अद्भुत प्रणाली है - जब तक आप कैश को कैसे साफ़ करें, इस सवाल का जवाब खोजने की कोशिश करें।

जैसे डिजाइन का उपयोग करके मॉड्यूल लोड किए जाते हैं<script type="module" src="index.mjs"></script>। फ़ाइल नाम में हैश का उपयोग नहीं किया गया है। इस स्थिति में, यह कैसे ब्राउज़र को सूचित करना है कि इसे कहां से डाउनलोड किया जाए index.mjs- कैश से या नेटवर्क से?

यह ध्यान दिया जाना चाहिए कि कैश कार्य को स्वीकार्य बनाना लगभग संभव है, लेकिन यह कुछ प्रयास करेगा। यहाँ आपको इसके लिए क्या चाहिए:

आपको सभी उत्तरों cache-controlका शीर्षक एक मान पर सेट करना होगा no-cache। अविश्वसनीय रूप से, नो-कैश का मतलब "कैश नहीं है।" इसका मतलब है कि फ़ाइल को कैश किया जाना चाहिए, लेकिन फ़ाइल को "स्रोत सर्वर पर सफल सत्यापन के बिना बाद के अनुरोध को संतुष्ट करने के लिए उपयोग नहीं किया जाना चाहिए।"
ETag. — () , , , . , 38fd9e .
CDN- , . ETag . . CDN- . ( ETag) . (, , Firebase).
-, , « » . , , , , .

परिणामस्वरूप, जब कोई आगंतुक साइट पर फिर से आता है, तो ब्राउज़र कहेगा: “मुझे फ़ाइल डाउनलोड करने की आवश्यकता है index.mjs। मैं देख रहा हूँ कि यह फ़ाइल मेरे कैश में पहले से मौजूद है, इसका ETag है 38fd9e। मैं सर्वर से इस फ़ाइल का अनुरोध करूंगा, लेकिन मैं उनसे कहूंगा कि इसे तभी मुझे भेजें, जब उनका ETag नहीं होगा 38fd9e। " सेवा कर्मचारी इस अनुरोध को रोक देगा, ईटैग को अनदेखा करेगा और इसे index.mjsअपने कैश से लौटा देगा (यह फ़ाइल उस समय कैश में मिल गई जब पृष्ठ लोड हो गया था)। तब सेवा कर्मी अनुरोध को सर्वर पर पुनर्निर्देशित कर देगा। सर्वर या तो यह कहते हुए एक संदेश लौटाएगा कि फ़ाइल नहीं बदली गई है, या कोई फ़ाइल जो कैश में संग्रहीत की जाएगी।

मेरी राय में, यह सब बहुत तकलीफदेह है।

अब, यदि आप रुचि रखते हैं, तो सेवा कार्यकर्ता कोड:

self.addEventListener('fetch', e => {
  e.respondWith(
    (async () => {
      //       
      const cacheResponse = await caches.match(e.request);
      
      //   (),   
      // (ETag-    )
      fetch(e.request).then(fetchResponse => {
        caches
          .open(CACHE_NAME)
          .then(cache => cache.put(e.request, fetchResponse));
      });
      
      if (cacheResponse) return cacheResponse;
      
      return fetch(e.request);
    })()
  );
});

मैं आलसी था, इसलिए मैंने अध्ययन नहीं किया और नवीनतम FetchEvent.navigationPreload संपत्ति का उपयोग नहीं किया । तथ्य यह है कि उस समय तक मैंने एक आवेदन लिखने से अधिक समय कैशिंग में बिताया था (आपकी जानकारी के लिए, मैंने इन मामलों पर क्रमशः 10 और 11 घंटे बिताए थे)।

हां, मैं यह नोट करना चाहता हूं कि "आयात कार्ड" का प्रस्ताव उपरोक्त वर्णित कुछ समस्याओं को हल करने के लिए है। यह आप मानचित्रण की तरह कुछ व्यवस्थित करने के लिए अनुमति देता है index.jsपर index.38fd9e.mjरों। लेकिन हैश उत्पन्न करने के लिए, वैसे भी, आपको किसी प्रकार की असेंबली पाइपलाइन की आवश्यकता होती है, आयात कार्ड को HTML फ़ाइल में एम्बेड करना होगा। इसका मतलब है कि यहां एक बंडलर की आवश्यकता है ... दरअसल, इस स्थिति में, ब्राउज़र में मॉड्यूल की अब आवश्यकता नहीं है।

नतीजतन, हालांकि यह इस सब को समझने के लिए दिलचस्प था, इसकी तुलना उस तरह से की जा सकती है जैसे मैंने एक साल के लिए एक मोनो साइकिल पर हर जगह चलाई थी। अब मैं ऐसा नहीं करूंगा।

लेकिन शायद हर कोई बंडल का उपयोग नहीं करता है?

मैंने इस सामग्री को इस धारणा पर लिखा था कि हर कोई मॉड्यूल में कोड लिखता है, निर्माण का उपयोग करता है , import/exportया requireफिर वेबपैक, ग्रंट, गुलप या ऐसा कुछ का उपयोग करके कोड को उत्पादन बंडलों में इकट्ठा करता है।

क्या कोई ऐसे डेवलपर हैं जो बंडल का उपयोग नहीं करते हैं? क्या कोई है जो अपने जावास्क्रिप्ट कोड को कई फाइलों में रखता है और उन्हें बिना बंडल के उत्पादन के लिए भेजता है? शायद इन लोगों में से एक आप हैं? यदि हां, तो मैं आपके जीवन के बारे में जानना चाहूंगा।

सारांश

मैं सभी गंभीर निर्णय लेने का प्रयास करता हूं, जैसे कि प्रभावी विकास के मुख्य सिद्धांतों के आधार पर मॉड्यूल और बंडल के बीच चयन करना। यह उत्पादकता और गुणवत्ता है।

दुर्भाग्य से, ब्राउज़रों में मॉड्यूल का उपयोग एक या दूसरे के लिए योगदान नहीं करता है।

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

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

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

प्रिय पाठकों! क्या आपने अपने ब्राउज़र में ES6 मॉड्यूल का उपयोग किया है?

ब्राउज़र में ईएस 6 मॉड्यूल: क्या वे तैयार हैं या नहीं?