तेज़ी से पेज लोड करने के लिए, मॉडर्न ब्राउज़र पर मॉडर्न कोड इस्तेमाल करें

Houssein Djirdeh

सभी प्रमुख ब्राउज़र पर अच्छी तरह से काम करने वाली वेबसाइटें बनाना, Google News ओपन वेब ईकोसिस्टम. हालांकि, इसका मतलब है कि आपको यह पक्का करना होगा कि आपने जो कोड लिखा है वह हर उस ब्राउज़र में काम करता है जिसे आपको टारगेट करना है. अगर आपको नई JavaScript भाषा सुविधाओं का उपयोग करना चाहते हैं, तो आपको इन्हें ट्रांसपाइल करना होगा जो ब्राउज़र अभी काम नहीं करते उनके लिए पुराने सिस्टम के साथ काम करने वाले फ़ॉर्मैट की सुविधाएं उन्हें.

कोड कंपाइल करने के लिए, Babel सबसे ज़्यादा इस्तेमाल किया जाने वाला टूल है जिसमें अलग-अलग ब्राउज़र और एनवायरमेंट वाले कोड में नया सिंटैक्स शामिल है (जैसे कि नोड) को समझ सकते हैं. यह गाइड मान लेती है कि आप बेबल का इस्तेमाल कर रहे हैं, इसलिए आप सेटअप निर्देशों का पालन करके अगर आपने अब तक इसे अपने ऐप्लिकेशन में शामिल नहीं किया है, तो इसे अपने ऐप्लिकेशन में शामिल करें. webpack चुनें अगर ऐप्लिकेशन में, मॉड्यूल बंडलर के तौर पर webpack का इस्तेमाल किया जा रहा है, तो Build Systems में.

बेबल का इस्तेमाल सिर्फ़ अपने उपयोगकर्ताओं के लिए ज़रूरी चीज़ों को ट्रांसपाइल करने के लिए किया जा सकता है. यह करने की ज़रूरत है:

1. टारगेट किए जाने वाले ब्राउज़र की पहचान करें.
2. सही ब्राउज़र टारगेट के साथ @babel/preset-env का इस्तेमाल करें.
3. जिन ब्राउज़र को ट्रांसपाइल्ड कोड की ज़रूरत नहीं है उन्हें यह कोड भेजने से रोकने के लिए, <script type="module"> का इस्तेमाल करें.

टारगेट किए जाने वाले ब्राउज़र की पहचान करना

अपने ऐप्लिकेशन में मौजूद कोड को ट्रांसपिल करने का तरीका बदलने से पहले, आपको यह पता लगाना ज़रूरी है कि कौनसे ब्राउज़र आपके ऐप्लिकेशन को ऐक्सेस करते हैं. यह विश्लेषण करना कि कौनसे ब्राउज़र फ़िलहाल, आपके उपयोगकर्ता उन लोगों का भी इस्तेमाल कर रहे हैं जिनका इस्तेमाल करके सोच-समझकर फ़ैसला लेते हैं.

@bbel/preset-env का इस्तेमाल करें

कोड को ट्रांसपिल करने से आम तौर पर ऐसी फ़ाइल मिलती है जिसका फ़ाइल साइज़ इससे बड़ा होता है उनके मूल रूपों के बारे में बात करते हैं. वीडियो कंपाइल करने की प्रोसेस को कम करके बंडल का साइज़ कम कर सकता है, ताकि वेब पेज की परफ़ॉर्मेंस बेहतर हो सके.

कुछ भाषाओं को चुनिंदा तरीके से कंपाइल करने के लिए खास प्लगिन शामिल करने के बजाय उपयोग की जा रही सुविधाओं के आधार पर, बेबेल ऐसे कई प्रीसेट उपलब्ध कराता है जो प्लगिन को बंडल करते हैं हैं बेमिसाल. @babel/preset-env का इस्तेमाल करें इसमें सिर्फ़ उन ट्रांसफ़ॉर्म और पॉलीफ़िल को शामिल किया जाना चाहिए जो आपके चुने गए ब्राउज़र के लिए ज़रूरी हैं टारगेटिंग.

अपने बेबल में presets कलेक्शन के अंदर @babel/preset-env को शामिल करें कॉन्फ़िगरेशन फ़ाइल, .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

targets फ़ील्ड का इस्तेमाल करके बताएं कि आपको ब्राउज़र के कौनसे वर्शन शामिल करने हैं browsers फ़ील्ड में सही क्वेरी जोड़कर ऐसा करें. @babel/preset-env अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है ब्राउज़रलिस्ट के साथ काम करता है. यह एक ओपन सोर्स कॉन्फ़िगरेशन है, जो अलग-अलग ब्राउज़र के बीच शेयर किया जाता है से ब्राउज़र को टारगेट करने के लिए टूल. साथ काम करने वाली क्वेरी की पूरी सूची ब्राउज़र की सूची से जुड़ा दस्तावेज़. एनवायरमेंट की सूची बनाने के लिए, .browserslistrc फ़ाइल का इस्तेमाल किया जा सकता है को टारगेट किया जा सकता है.

">0.25%" वैल्यू, बेबल को सिर्फ़ कन्वर्ज़न को शामिल करने के लिए कहती है की ज़रूरत उन ब्राउज़र के लिए होती है जो पूरी दुनिया में 0.25% से ज़्यादा हैं इस्तेमाल. इससे यह पक्का हो जाता है कि आपके बंडल में ज़रूरत से ज़्यादा ट्रांसपिलर न हो जिनका इस्तेमाल बहुत कम उपयोगकर्ता करते हैं.

ज़्यादातर मामलों में, नीचे दिए गए तरीकों का इस्तेमाल करने के बजाय, यह तरीका बेहतर होगा कॉन्फ़िगरेशन:

  "targets": "last 2 versions"

"last 2 versions" वैल्यू, हर ब्राउज़र के पिछले दो वर्शन, इसका मतलब है कि Internet Explorer जैसे बंद किए गए ब्राउज़र के लिए सहायता उपलब्ध कराई जाती है. अगर आपको इनकी उम्मीद नहीं है, तो इससे आपके बंडल का साइज़ बढ़ सकता है. आपके ऐप्लिकेशन तक पहुंचने के लिए उपयोग किए जाने वाले ब्राउज़र.

आखिरकार, आपको क्वेरी का सही कॉम्बिनेशन सिर्फ़ इस तरह चुनना चाहिए उन ब्राउज़र को टारगेट करें जो आपकी ज़रूरतों के हिसाब से सही हैं.

आधुनिक बग समाधान सक्षम करें

@babel/preset-env, JavaScript सिंटैक्स की कई सुविधाओं को कलेक्शन में ग्रुप करता है और इसे चालू/बंद करता है उन्हें तय टारगेट ब्राउज़र के आधार पर तय करते हैं. हालांकि यह अच्छी तरह से काम करता है, लेकिन ब्राउज़र का पूरा कलेक्शन जब किसी टारगेट किए गए ब्राउज़र में सिर्फ़ एक सुविधा वाला बग हो, तो सिंटैक्स सुविधाएं बदल जाती हैं. इस वजह से, अक्सर ज़रूरत से ज़्यादा कोड में बदलाव होता है.

मूल रूप से एक अलग प्रीसेट के रूप में बनाया गया था, @babel/preset-env में गड़बड़ी ठीक करने का विकल्प मॉडर्न सिंटैक्स को कन्वर्ट करके इस समस्या को हल करता है. यह सिंटैक्स कुछ ब्राउज़र में सबसे नज़दीक के के साथ ठीक से काम न करने वाला सिंटैक्स हो. नतीजे में, करीब-करीब एक जैसा मॉडर्न कोड मिलता है में कुछ छोटे सिंटैक्स ट्वीक शामिल करें, जो सभी टारगेट ब्राउज़र के साथ काम करने की गारंटी देते हैं. इसका इस्तेमाल करने के लिए ऑप्टिमाइज़ेशन, पक्का करें कि आपने @babel/preset-env 7.10 या इसके बाद का वर्शन इंस्टॉल किया है. इसके बाद true के लिए bugfixes प्रॉपर्टी:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

बेबल 8 में, bugfixes विकल्प डिफ़ॉल्ट रूप से चालू रहेगा.

<script type="module"> का इस्तेमाल करें

JavaScript मॉड्यूल या ES मॉड्यूल वाली नई सुविधा है जो सभी मुख्य ब्राउज़र के लिए. मॉड्यूल का इस्तेमाल किया जा सकता है का इस्तेमाल करके ऐसी स्क्रिप्ट बनाई जा सकती हैं जो दूसरे मॉड्यूल से इंपोर्ट और एक्सपोर्ट कर सकें, @babel/preset-env के साथ भी इनका इस्तेमाल किया जा सकता है, ताकि सिर्फ़ उन ब्राउज़र को टारगेट किया जा सके जो उन्हें.

ब्राउज़र के खास वर्शन या बाज़ार में हिस्सेदारी के बारे में सवाल करने के बजाय, आपकी .babelrc फ़ाइल की targets फ़ील्ड में "esmodules" : true दर्ज करके.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

बेबल के साथ कंपाइल की गई कई नई ECMAScript सुविधाएं पहले से ही काम कर रही हैं जो JavaScript मॉड्यूल का समर्थन करते हैं. ऐसा करने से, यह पक्का करने की प्रोसेस को आसान बनाएं कि सिर्फ़ ट्रांसपिल किए गए कोड का इस्तेमाल किया जाए की ज़रूरत होती है.

मॉड्यूल के साथ काम करने वाले ब्राउज़र, nomodule एट्रिब्यूट वाली स्क्रिप्ट को अनदेखा करते हैं. इसके उलट, मॉड्यूल जिन ब्राउज़र पर काम नहीं करता वे स्क्रिप्ट एलिमेंट को अनदेखा करते हैं type="module". इसका मतलब है कि आपके पास मॉड्यूल के साथ-साथ, कंपाइल किया गया फ़ॉलबैक शामिल करने का विकल्प है.

आदर्श रूप से, किसी ऐप्लिकेशन की दो वर्शन स्क्रिप्ट इस तरह शामिल की जाती हैं:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

मॉड्यूल की सुविधा वाले ब्राउज़र, main.mjs को फ़ेच और एक्ज़ीक्यूट करते हैं. साथ ही, compiled.js को अनदेखा करते हैं. जिन ब्राउज़र में मॉड्यूल काम नहीं करते उन पर भी मॉड्यूल काम नहीं करते.

अगर Webpack का इस्तेमाल किया जाता है, तो अपने कॉन्फ़िगरेशन में दो उपयोगकर्ताओं के लिए अलग-अलग टारगेट सेट किए जा सकते हैं ऐप्लिकेशन के अलग-अलग वर्शन उपलब्ध कराएं:

• यह वर्शन सिर्फ़ मॉड्यूल के साथ काम करने वाले ब्राउज़र के लिए है.
• ऐसा वर्शन जिसमें एक कंपाइल की गई स्क्रिप्ट शामिल होती है जो किसी भी लेगसी ब्राउज़र में काम करती है. इसका फ़ाइल साइज़ बड़ा है, क्योंकि ट्रांसपिलेशन को ब्राउज़र की बड़ी रेंज के साथ काम करना होगा.

समीक्षा के लिए, कॉनर क्लार्क और जेसन मिलर का धन्यवाद.