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

Houssein Djirdeh

ध्यान दें: इस कोडलैब में दिखाई गई तकनीकों का इस्तेमाल करने का सुझाव अब नहीं दिया जाता. इसकी वजह यह है कि मॉडर्न ब्राउज़र में अब JavaScript की ऐसी सुविधाएं काम करती हैं जो ट्रांसपाइल किए बिना मॉडर्न कोड उपलब्ध कराने के लिए ज़रूरी हैं. अगर आपको अब भी ऐसे लेगसी ब्राउज़र के साथ काम करना है जो JavaScript की आधुनिक सुविधाओं के साथ काम नहीं करते, तो इस कोडलैब का कॉन्टेंट अब भी आपके काम का हो सकता है.

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में यह Glitch खोलें.

इस कोडलैब में, इस आसान ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाएं. इससे उपयोगकर्ता, रैंडम बिल्लियों को रेटिंग दे सकते हैं. JavaScript बंडल को ऑप्टिमाइज़ करने का तरीका जानें. इसके लिए, ट्रांसपाइल किए जाने वाले कोड की संख्या कम करें.

सैंपल के तौर पर मिले ऐप्लिकेशन में, कोई शब्द या इमोजी चुनकर यह बताया जा सकता है कि आपको हर बिल्ली कितनी पसंद है. किसी बटन पर क्लिक करने पर, ऐप्लिकेशन, बिल्ली की मौजूदा इमेज के नीचे बटन की वैल्यू दिखाता है.

मापें

ध्यान दें: इस ऐप्लिकेशन में webpack का इस्तेमाल किया गया है. इसलिए, कोड में किए गए किसी भी बदलाव से एक नया बिल्ड ट्रिगर होगा. इसमें कुछ सेकंड लग सकते हैं. यह प्रोसेस पूरी होने के बाद, आपको ऐप्लिकेशन में बदलाव दिखेंगे.

किसी भी तरह का ऑप्टिमाइज़ेशन जोड़ने से पहले, वेबसाइट की जांच करना हमेशा एक अच्छा तरीका होता है:

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें को दबाएं. इसके बाद, फ़ुलस्क्रीन को दबाएं.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.
5. ऐप्लिकेशन को फिर से लोड करें.

इस ऐप्लिकेशन के लिए, 80 केबी से ज़्यादा स्टोरेज का इस्तेमाल किया गया है! यह पता लगाने का समय आ गया है कि बंडल के कुछ हिस्सों का इस्तेमाल नहीं किया जा रहा है:

1. कमांड मेन्यू खोलने के लिए, Control+Shift+P (या Mac पर Command+Shift+P) दबाएं.

2. कवरेज टैब दिखाने के लिए, Show Coverage डालें और Enter दबाएं.

3. कवरेज टैब में, कवरेज कैप्चर करते समय ऐप्लिकेशन को फिर से लोड करने के लिए, फिर से लोड करें पर क्लिक करें.

   

4. देखें कि मुख्य बंडल के लिए कितना कोड इस्तेमाल किया गया और कितना कोड लोड किया गया:

   

बंडल के आधे से ज़्यादा हिस्से (44 केबी) का इस्तेमाल ही नहीं किया गया है. ऐसा इसलिए है, क्योंकि इसमें मौजूद ज़्यादातर कोड में पॉलीफ़िल होते हैं. इनसे यह पक्का किया जाता है कि ऐप्लिकेशन, पुराने ब्राउज़र में काम करे.

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

JavaScript भाषा का सिंटैक्स, ECMAScript या ECMA-262 नाम के स्टैंडर्ड के मुताबिक होता है. स्पेसिफ़िकेशन के नए वर्शन हर साल रिलीज़ किए जाते हैं. इनमें ऐसी नई सुविधाएं शामिल होती हैं जो प्रस्ताव की प्रोसेस को पास कर चुकी होती हैं. हर मुख्य ब्राउज़र, इन सुविधाओं को सपोर्ट करने के अलग-अलग स्टेज पर होता है.

ऐप्लिकेशन में ES2015 की इन सुविधाओं का इस्तेमाल किया जाता है:

• ऐरो फ़ंक्शन
• टेंप्लेट लिटरल
• For…of loop
• Destructuring assignment

ES2017 की इस सुविधा का भी इस्तेमाल किया जाता है:

• एसिंक्रोनस फ़ंक्शन

src/index.js में मौजूद सोर्स कोड को देखें और जानें कि इन सभी का इस्तेमाल कैसे किया जाता है.

ये सभी सुविधाएं, Chrome के नए वर्शन में काम करती हैं. हालांकि, उन ब्राउज़र का क्या जो इन्हें सपोर्ट नहीं करते? ऐप्लिकेशन में शामिल Babel, कोड को कंपाइल करने के लिए इस्तेमाल की जाने वाली सबसे लोकप्रिय लाइब्रेरी है. यह नए सिंटैक्स वाले कोड को ऐसे कोड में कंपाइल करती है जिसे पुराने ब्राउज़र और एनवायरमेंट समझ सकें. यह दो तरीकों से ऐसा करता है:

• Polyfills को नए ES2015+ फ़ंक्शन को एम्युलेट करने के लिए शामिल किया गया है, ताकि उनके एपीआई का इस्तेमाल किया जा सके. भले ही, ब्राउज़र पर यह सुविधा काम न करती हो. यहां Array.includes तरीके के पॉलीफ़िल का एक उदाहरण दिया गया है.
• प्लग इन का इस्तेमाल, ES2015 कोड (या इसके बाद के वर्शन) को पुराने ES5 सिंटैक्स में बदलने के लिए किया जाता है. ये सिंटैक्स से जुड़े बदलाव हैं, जैसे कि ऐरो फ़ंक्शन. इसलिए, इन्हें पॉलीफ़िल के साथ एम्युलेट नहीं किया जा सकता.

package.json को देखकर पता लगाएं कि कौनसी Babel लाइब्रेरी शामिल हैं:

"dependencies": {
  "@babel/polyfill": "^7.0.0"
},
"devDependencies": {
  //...
  "babel-loader": "^8.0.2",
  "@babel/core": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  //...
}

• @babel/core, Babel का मुख्य कंपाइलर है. इससे, Babel के सभी कॉन्फ़िगरेशन, प्रोजेक्ट के रूट में मौजूद .babelrc में तय किए जाते हैं.
• babel-loader, webpack बिल्ड प्रोसेस में Babel को शामिल करता है.

अब webpack.config.js को देखें और जानें कि babel-loader को नियम के तौर पर कैसे शामिल किया गया है:

module: {
  rules: [
    //...
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }
  ]
},

• @babel/polyfill, ECMAScript की किसी भी नई सुविधा के लिए ज़रूरी सभी polyfill उपलब्ध कराता है, ताकि वे ऐसे एनवायरमेंट में काम कर सकें जो उन्हें सपोर्ट नहीं करते. इसे पहले ही src/index.js. में सबसे ऊपर इंपोर्ट किया जा चुका है

import "./style.css";
import "@babel/polyfill";

• @babel/preset-env यह तय करता है कि टारगेट के तौर पर चुने गए किसी भी ब्राउज़र या एनवायरमेंट के लिए, कौनसे ट्रांसफ़ॉर्म और पॉलीफ़िल ज़रूरी हैं.

Babel कॉन्फ़िगरेशन फ़ाइल, .babelrc देखें और जानें कि इसे कैसे शामिल किया गया है:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions"
      }
    ]
  ]
}

यह Babel और webpack सेटअप है. अगर webpack के बजाय किसी दूसरे मॉड्यूल बंडलर का इस्तेमाल किया जा रहा है, तो अपने ऐप्लिकेशन में Babel को शामिल करने का तरीका जानें.

.babelrc में मौजूद targets एट्रिब्यूट से पता चलता है कि किन ब्राउज़र को टारगेट किया जा रहा है. @babel/preset-env को browserslist के साथ इंटिग्रेट किया गया है. इसका मतलब है कि इस फ़ील्ड में इस्तेमाल की जा सकने वाली क्वेरी की पूरी सूची, browserlist के दस्तावेज़ में देखी जा सकती है.

"last 2 versions" वैल्यू, हर ब्राउज़र के पिछले दो वर्शन के लिए, ऐप्लिकेशन में कोड को ट्रांसपाइल करती है.

डीबग करना

ब्राउज़र के सभी Babel टारगेट के साथ-साथ, शामिल किए गए सभी ट्रांसफ़ॉर्म और पॉलीफ़िल की पूरी जानकारी पाने के लिए, .babelrc: में debug फ़ील्ड जोड़ें

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
      }
    ]
  ]
}

• टूल पर क्लिक करें.
• लॉग पर क्लिक करें.

ऐप्लिकेशन को फिर से लोड करें और एडिटर में सबसे नीचे मौजूद, Glitch के स्टेटस लॉग देखें.

टारगेट किए गए ब्राउज़र

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

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

Babel, इस्तेमाल किए गए ट्रांसफ़ॉर्म प्लग इन की सूची भी लॉग करता है:

यह तो काफ़ी लंबी सूची है! ये वे सभी प्लगिन हैं जिनका इस्तेमाल Babel को करना होगा, ताकि वह टारगेट किए गए सभी ब्राउज़र के लिए, किसी भी ES2015+ सिंटैक्स को पुराने सिंटैक्स में बदल सके.

हालांकि, Babel इस्तेमाल किए गए किसी भी खास polyfill को नहीं दिखाता है:

ऐसा इसलिए होता है, क्योंकि पूरा @babel/polyfill सीधे इंपोर्ट किया जाता है.

पॉलीफ़िल को अलग-अलग लोड करें

डिफ़ॉल्ट रूप से, Babel में हर वह polyfill शामिल होता है जो पूरे ES2015+ एनवायरमेंट के लिए ज़रूरी होता है. ऐसा तब होता है, जब @babel/polyfill को किसी फ़ाइल में इंपोर्ट किया जाता है. टारगेट किए गए ब्राउज़र के लिए ज़रूरी पॉलीफ़िल इंपोर्ट करने के लिए, कॉन्फ़िगरेशन में useBuiltIns: 'entry' जोड़ें.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
        "useBuiltIns": "entry"
      }
    ]
  ]
}

ऐप्लिकेशन को फिर से लोड करें. अब आपको शामिल किए गए सभी पॉलीफ़िल दिखेंगे:

हालांकि, अब "last 2 versions" के लिए सिर्फ़ ज़रूरी पॉलीफ़िल शामिल किए गए हैं, लेकिन यह अब भी एक बहुत लंबी सूची है! ऐसा इसलिए है, क्योंकि हर नई सुविधा के लिए, टारगेट ब्राउज़र के लिए ज़रूरी पॉलीफ़िल अब भी शामिल हैं. एट्रिब्यूट की वैल्यू को usage में बदलें, ताकि सिर्फ़ उन सुविधाओं को शामिल किया जा सके जिनका इस्तेमाल कोड में किया जा रहा है.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true,
        "useBuiltIns": "entry"
        "useBuiltIns": "usage"
      }
    ]
  ]
}

इससे, ज़रूरत के हिसाब से पॉलीफ़िल अपने-आप शामिल हो जाते हैं. इसका मतलब है कि src/index.js. में @babel/polyfill इंपोर्ट को हटाया जा सकता है

import "./style.css";
import "@babel/polyfill";

अब ऐप्लिकेशन के लिए सिर्फ़ ज़रूरी पॉलीफ़िल शामिल किए जाते हैं.

ऐप्लिकेशन बंडल का साइज़ काफ़ी कम हो जाता है.

इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची को छोटा करना

हालांकि, अब भी कई ब्राउज़र टारगेट शामिल हैं. साथ ही, अब ज़्यादा लोग Internet Explorer जैसे बंद हो चुके ब्राउज़र का इस्तेमाल नहीं करते. कॉन्फ़िगरेशन को इस तरह अपडेट करें:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "targets": [">0.25%", "not ie 11"],
        "debug": true,
        "useBuiltIns": "usage",
      }
    ]
  ]
}

फ़ेच किए गए बंडल की जानकारी देखें.

ऐप्लिकेशन का साइज़ बहुत छोटा होने की वजह से, इन बदलावों से ज़्यादा फ़र्क़ नहीं पड़ता. हालांकि, हमारा सुझाव है कि आप ब्राउज़र के बाज़ार में हिस्सेदारी के प्रतिशत (जैसे कि ">0.25%") का इस्तेमाल करें. साथ ही, उन ब्राउज़र को बाहर रखें जिनका इस्तेमाल आपके उपयोगकर्ता नहीं करते. इस बारे में ज़्यादा जानने के लिए, जेम्स काइल का लेख, "Last 2 versions" considered harmful पढ़ें.

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

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

JavaScript मॉड्यूल एक नई सुविधा है. यह सभी मुख्य ब्राउज़र पर काम करती है. मॉड्यूल बनाने के लिए, type="module" एट्रिब्यूट का इस्तेमाल किया जा सकता है. इससे ऐसी स्क्रिप्ट तय की जा सकती हैं जो दूसरे मॉड्यूल से इंपोर्ट और एक्सपोर्ट करती हैं. उदाहरण के लिए:

// math.mjs
export const add = (x, y) => x + y;

<!-- index.html -->
<script type="module">
  import { add } from './math.mjs';

  add(5, 2); // 7
</script>

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

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

Babel के साथ ES मॉड्यूल का इस्तेमाल करना

ऐप्लिकेशन के दोनों वर्शन के लिए, @babel/preset-env की अलग-अलग सेटिंग रखने के लिए, .babelrc फ़ाइल को हटाएं. ऐप्लिकेशन के हर वर्शन के लिए, कंपाइलेशन के दो अलग-अलग फ़ॉर्मैट तय करके, webpack कॉन्फ़िगरेशन में Babel सेटिंग जोड़ी जा सकती हैं.

webpack.config.js में लेगसी स्क्रिप्ट के लिए कॉन्फ़िगरेशन जोड़कर शुरुआत करें:

const legacyConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: false
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

ध्यान दें कि "@babel/preset-env" के लिए targets वैल्यू का इस्तेमाल करने के बजाय, esmodules के साथ false वैल्यू का इस्तेमाल किया गया है. इसका मतलब है कि Babel में वे सभी ज़रूरी ट्रांसफ़ॉर्म और पॉलीफ़िल शामिल हैं जो हर उस ब्राउज़र को टारगेट करते हैं जो अब तक ES मॉड्यूल के साथ काम नहीं करता.

webpack.config.js फ़ाइल की शुरुआत में entry, cssRule, और corePlugins ऑब्जेक्ट जोड़ें. ये सभी, मॉड्यूल और ब्राउज़र पर उपलब्ध कराई गई लेगसी स्क्रिप्ट के बीच शेयर किए जाते हैं.

const entry = {
  main: "./src"
};

const cssRule = {
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
};

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"})
];

अब इसी तरह, नीचे दी गई मॉड्यूल स्क्रिप्ट के लिए एक कॉन्फ़िगरेशन ऑब्जेक्ट बनाएं, जहां legacyConfig को तय किया गया है:

const moduleConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].mjs"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: true
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

यहां मुख्य अंतर यह है कि आउटपुट फ़ाइल नाम के लिए, .mjs फ़ाइल एक्सटेंशन का इस्तेमाल किया जाता है. यहां esmodules की वैल्यू को 'सही है' पर सेट किया गया है. इसका मतलब है कि इस मॉड्यूल में आउटपुट के तौर पर मिलने वाला कोड, एक छोटी और कम कंपाइल की गई स्क्रिप्ट है. इस उदाहरण में, इस स्क्रिप्ट में कोई बदलाव नहीं किया गया है. इसकी वजह यह है कि इस्तेमाल की गई सभी सुविधाएं, मॉड्यूल के साथ काम करने वाले ब्राउज़र में पहले से काम करती हैं.

फ़ाइल के आखिर में, दोनों कॉन्फ़िगरेशन को एक ही कलेक्शन में एक्सपोर्ट करें.

module.exports = [
  legacyConfig, moduleConfig
];

अब यह उन ब्राउज़र के लिए छोटा मॉड्यूल बनाता है जो इसे सपोर्ट करते हैं. साथ ही, पुराने ब्राउज़र के लिए बड़ी ट्रांसपाइल की गई स्क्रिप्ट बनाता है.

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

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

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

यह ध्यान रखना ज़रूरी है कि सामान्य स्क्रिप्ट के उलट, मॉड्यूल स्क्रिप्ट को डिफ़ॉल्ट रूप से हमेशा बाद में लोड किया जाता है. अगर आपको nomodule स्क्रिप्ट को भी बाद में लोड करना है और पार्स करने के बाद ही उसे लागू करना है, तो आपको defer एट्रिब्यूट जोड़ना होगा:

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

आखिर में, मॉड्यूल और लेगसी स्क्रिप्ट में क्रमशः module और nomodule एट्रिब्यूट जोड़ें. इसके लिए, webpack.config.js के सबसे ऊपर ScriptExtHtmlWebpackPlugin को इंपोर्ट करें:

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");

अब इस प्लगिन को शामिल करने के लिए, कॉन्फ़िगरेशन में plugins कलेक्शन को अपडेट करें:

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"}),
  new ScriptExtHtmlWebpackPlugin({
    module: /\.mjs$/,
    custom: [
      {
        test: /\.js$/,
        attribute: 'nomodule',
        value: ''
    },
    ]
  })
];

प्लगिन की ये सेटिंग, सभी .mjs स्क्रिप्ट एलिमेंट के लिए type="module" एट्रिब्यूट जोड़ती हैं. साथ ही, सभी .js स्क्रिप्ट मॉड्यूल के लिए nomodule एट्रिब्यूट जोड़ती हैं.

ध्यान दें: अगर आपको webpack.config.js में इन सभी कॉन्फ़िगरेशन को जोड़ने का तरीका समझने में समस्या आ रही है, तो फ़ाइल का पूरा वर्शन देखें.

एचटीएमएल दस्तावेज़ में मॉड्यूल दिखाना

आखिर में, लेगसी और मॉडर्न स्क्रिप्ट एलिमेंट, दोनों को एचटीएमएल फ़ाइल में आउटपुट करना होगा. माफ़ करें, फ़ाइनल एचटीएमएल फ़ाइल बनाने वाला प्लगिन HTMLWebpackPlugin, फ़िलहाल मॉड्यूल और नोमॉड्यूल, दोनों स्क्रिप्ट के आउटपुट के साथ काम नहीं करता. इस समस्या को हल करने के लिए, BabelMultiTargetPlugin और HTMLWebpackMultiBuildPlugin जैसे अलग-अलग प्लग इन और तरीके मौजूद हैं. हालांकि, इस ट्यूटोरियल में मॉड्यूल स्क्रिप्ट एलिमेंट को मैन्युअल तरीके से जोड़ने का आसान तरीका बताया गया है.

फ़ाइल के आखिर में, src/index.js में यह जोड़ें:

    ...
    </form>
    <script type="module" src="main.mjs"></script>
  </body>
</html>

अब ऐप्लिकेशन को ऐसे ब्राउज़र में लोड करें जो मॉड्यूल के साथ काम करता हो, जैसे कि Chrome का नया वर्शन.

सिर्फ़ मॉड्यूल को फ़ेच किया जाता है. इसका बंडल साइज़ काफ़ी छोटा होता है, क्योंकि यह ज़्यादातर ट्रांसपाइल नहीं होता! ब्राउज़र, दूसरे स्क्रिप्ट एलिमेंट को पूरी तरह से अनदेखा कर देता है.

अगर ऐप्लिकेशन को किसी पुराने ब्राउज़र पर लोड किया जाता है, तो सिर्फ़ बड़ी और ट्रांसपाइल की गई स्क्रिप्ट फ़ेच की जाती है. इसमें सभी ज़रूरी पॉलीफ़िल और ट्रांसफ़ॉर्म शामिल होते हैं. यहां Chrome के पुराने वर्शन (वर्शन 38) पर किए गए सभी अनुरोधों का स्क्रीनशॉट दिया गया है.

नतीजा

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