तेज़ी से काम करने वाले ऐप्लिकेशन के लिए आधुनिक JavaScript प्रकाशित करें, शिप करें, और इंस्टॉल करें

नई JavaScript डिपेंडेंसी और आउटपुट को चालू करके, परफ़ॉर्मेंस को बेहतर बनाएं.

Jason Miller
Houssein Djirdeh

90% से ज़्यादा ब्राउज़र, आधुनिक JavaScript को चला सकते हैं. हालांकि, वेब पर परफ़ॉर्मेंस से जुड़ी समस्याओं का मुख्य सोर्स, लेगसी JavaScript का मौजूद होना है.

नया JavaScript

आधुनिक JavaScript की पहचान किसी खास ECMAScript खास वर्शन में लिखे गए कोड के तौर पर नहीं होती, बल्कि इसकी जगह एक सिंटैक्स होता है, जो सभी आधुनिक ब्राउज़र के साथ काम करता है. Chrome, Edge, Firefox, और Safari जैसे आधुनिक वेब ब्राउज़र, ब्राउज़र मार्केट के 90% से ज़्यादा हिस्से पर काबिज़ हैं. साथ ही, एक ही रेंडरिंग इंजन पर काम करने वाले अलग-अलग ब्राउज़र, 5% हिस्से पर काबिज़ हैं. इसका मतलब है कि ग्लोबल वेब ट्रैफ़िक का 95% हिस्सा, उन ब्राउज़र से आता है जो पिछले 10 सालों में, JavaScript भाषा की सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधाओं के साथ काम करते हैं. इनमें ये शामिल हैं:

  • क्लास (ES2015)
  • ऐरो फ़ंक्शन (ES2015)
  • जनरेटर (ES2015)
  • ब्लॉक स्कोपिंग (ES2015)
  • डेटा स्ट्रक्चर में बदलाव करना (ES2015)
  • बाकी और स्प्रेड पैरामीटर (ES2015)
  • ऑब्जेक्ट शॉर्टहैंड (ES2015)
  • Async/await (ES2017)

भाषा की खास बातों के नए वर्शन की सुविधाएं, मॉडर्न ब्राउज़र में कम मददगार होती हैं. उदाहरण के लिए, ES2020 और ES2021 की कई सुविधाएं, ब्राउज़र मार्केट के सिर्फ़ 70% हिस्से में काम करती हैं. हालांकि, यह ब्राउज़र के ज़्यादातर हिस्से में काम करती हैं, लेकिन इन सुविधाओं पर सीधे तौर पर भरोसा करना सुरक्षित नहीं है. इसका मतलब है कि "नया" JavaScript, समय के साथ बदलता रहता है. हालांकि, ES2017 में ब्राउज़र के साथ काम करने की सबसे ज़्यादा सुविधाएं उपलब्ध हैं. इसमें, सिंटैक्स की ज़्यादातर सामान्य सुविधाएं शामिल हैं. दूसरे शब्दों में, ES2017, आज के सिंटैक्स के सबसे करीब है.

लेगसी JavaScript

लेगसी JavaScript एक ऐसा कोड है जिसमें ऊपर दी गई भाषा की सभी सुविधाओं का इस्तेमाल करने से बचा जा सकता है. ज़्यादातर डेवलपर, मॉडर्न सिंटैक्स का इस्तेमाल करके अपना सोर्स कोड लिखते हैं. हालांकि, वे ब्राउज़र के साथ बेहतर तरीके से काम करने के लिए, सभी कोड को लेगसी सिंटैक्स में कंपाइल करते हैं. लेगसी सिंटैक्स में कॉम्पाइल करने से, ब्राउज़र के साथ काम करने की सुविधा बढ़ती है. हालांकि, अक्सर इसका असर उतना नहीं होता जितना हमें लगता है. कई मामलों में, सहायता टीम करीब 95% से बढ़कर 98% हो जाती है और इस वजह से लोगों को बहुत ज़्यादा खर्च करना पड़ता है:

  • आम तौर पर, लेगसी JavaScript, मिलते-जुलते आधुनिक कोड से करीब 20% बड़ा और धीमा होता है. टूल की कमी और गलत कॉन्फ़िगरेशन की वजह से, अक्सर इस अंतर को और भी बढ़ा दिया जाता है.

  • इंस्टॉल की गई लाइब्रेरी, आम तौर पर प्रोडक्शन के लिए इस्तेमाल किए जाने वाले 90% JavaScript कोड के लिए ज़िम्मेदार होती हैं. लाइब्रेरी कोड में, polyfill और हेल्पर कोड के डुप्लीकेट होने की वजह से, लेगसी JavaScript का ओवरहेड और भी ज़्यादा हो जाता है. हालांकि, नए कोड को पब्लिश करके, इस ओवरहेड से बचा जा सकता है.

एनपीएम पर मॉडर्न JavaScript

हाल ही में, Node.js ने किसी पैकेज के लिए एंट्री पॉइंट तय करने के लिए "exports" फ़ील्ड का स्टैंडर्ड तय किया है:

{
  "exports": "./index.js"
}

"exports" फ़ील्ड से रेफ़र किए गए मॉड्यूल का मतलब है कि Node का कम से कम 12.8 वर्शन इस्तेमाल किया जा रहा है, जो ES2019 के साथ काम करता है. इसका मतलब है कि "exports" फ़ील्ड का इस्तेमाल करके रेफ़रंस किए गए किसी भी मॉड्यूल को नए वर्शन के JavaScript में लिखा जा सकता है. पैकेज का इस्तेमाल करने वाले लोगों को यह मानना होगा कि "exports" फ़ील्ड वाले मॉड्यूल में आधुनिक कोड है और ज़रूरत पड़ने पर, उन्हें ट्रांसपाइल किया जा सकता है.

सिर्फ़ मॉडर्न

अगर आपको किसी पैकेज को आधुनिक कोड के साथ पब्लिश करना है और उसे डिपेंडेंसी के तौर पर इस्तेमाल करने पर, ट्रांसपाइल करने की ज़िम्मेदारी उपयोगकर्ता पर छोड़नी है, तो सिर्फ़ "exports" फ़ील्ड का इस्तेमाल करें.

{
  "name": "foo",
  "exports": "./modern.js"
}

लेगसी फ़ॉलबैक वाला आधुनिक वर्शन

मॉडर्न कोड का इस्तेमाल करके अपना पैकेज पब्लिश करने के लिए, "main" के साथ "exports" फ़ील्ड का इस्तेमाल करें. साथ ही, लेगसी ब्राउज़र के लिए ES5 + CommonJS फ़ॉलबैक भी शामिल करें.

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs"
}

लेगसी फ़ॉलबैक और ईएसएम बंडलर ऑप्टिमाइज़ेशन के साथ आधुनिक

फ़ॉलबैक CommonJS एंट्रीपॉइंट तय करने के अलावा, "module" फ़ील्ड का इस्तेमाल, मिलते-जुलते लेगसी फ़ॉलबैक बंडल पर ले जाने के लिए किया जा सकता है. हालांकि, यह ऐसा बंडल होना चाहिए जो JavaScript मॉड्यूल सिंटैक्स (import और export) का इस्तेमाल करता हो.

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs",
  "module": "./module.js"
}

webpack और Rollup जैसे कई बंडलर, मॉड्यूल की सुविधाओं का फ़ायदा पाने और ट्री शेकिंग को चालू करने के लिए, इस फ़ील्ड का इस्तेमाल करते हैं. यह अब भी एक लेगसी बंडल है, जिसमें import/export सिंटैक्स के अलावा कोई आधुनिक कोड नहीं है. इसलिए, इस तरीके का इस्तेमाल करके, आधुनिक कोड को लेगसी फ़ॉलबैक के साथ शिप करें, जो अब भी बंडलिंग के लिए ऑप्टिमाइज़ किया गया है.

ऐप्लिकेशन में मॉडर्न JavaScript

वेब ऐप्लिकेशन में सामान्य प्रोडक्शन JavaScript कोड का ज़्यादातर हिस्सा, तीसरे पक्ष की डिपेंडेंसी से बनाया जाता है. हालांकि, npm डिपेंडेंसी को पहले से ही लेगसी ES5 सिंटैक्स के तौर पर पब्लिश किया जाता रहा है, लेकिन अब यह एक सुरक्षित अनुमान नहीं है. साथ ही, डिपेंडेंसी के अपडेट से आपके ऐप्लिकेशन में ब्राउज़र की सहायता बंद होने का खतरा भी रहता है.

npm पैकेज की बढ़ती संख्या, आधुनिक JavaScript पर माइग्रेट हो रही है. इसलिए, यह पक्का करना ज़रूरी है कि उन्हें मैनेज करने के लिए, बिल्ड टूल सेट अप किया गया हो. इस बात की संभावना है कि आप जिन एनपीएम पैकेज पर निर्भर हैं, उनमें से कुछ पर पहले से ही आधुनिक भाषा की सुविधाओं का इस्तेमाल हो रहा है. पुराने ब्राउज़र में अपने ऐप्लिकेशन को काम करते हुए बनाए रखने के लिए, npm से आधुनिक कोड इस्तेमाल करने के कई विकल्प उपलब्ध हैं. हालांकि, आम तौर पर, बिल्ड सिस्टम को डिपेंडेंसी को उसी सिंटैक्स टारगेट में ट्रांसपाइल करना होता है जो आपके सोर्स कोड के लिए इस्तेमाल किया जाता है.

Webpack

webpack 5 में, अब यह कॉन्फ़िगर किया जा सकता है कि बंडल और मॉड्यूल के लिए कोड जनरेट करते समय, webpack किस सिंटैक्स का इस्तेमाल करेगा. इससे आपके कोड या डिपेंडेंसी को ट्रांसपाइल नहीं किया जाता. इसका असर सिर्फ़ webpack से जनरेट किए गए "ग्लू" कोड पर पड़ता है. ब्राउज़र के साथ काम करने वाले टारेट की जानकारी देने के लिए, अपने प्रोजेक्ट में browserslist कॉन्फ़िगरेशन जोड़ें या सीधे अपने वेबपैक कॉन्फ़िगरेशन में ऐसा करें:

module.exports = {
  target: ['web', 'es2017'],
};

webpack को कॉन्फ़िगर करके, ऑप्टिमाइज़ किए गए बंडल जनरेट किए जा सकते हैं. ये बंडल, आधुनिक ES मॉड्यूल वाले एनवायरमेंट को टारगेट करते समय, ग़ैर-ज़रूरी रैपर फ़ंक्शन को हटा देते हैं. इससे webpack को भी कॉन्फ़िगर किया जाता है, ताकि वह <script type="module"> का इस्तेमाल करके, कोड के अलग-अलग हिस्सों वाले बंडल लोड कर सके.

module.exports = {
  target: ['web', 'es2017'],
  output: {
    module: true,
  },
  experiments: {
    outputModule: true,
  },
};

ऐसे कई वेबपैक प्लगिन उपलब्ध हैं जिनकी मदद से लेगसी ब्राउज़र, जैसे कि Optimize प्लगिन और बेबेलEsmप्लगिन का इस्तेमाल करते हुए, मॉडर्न JavaScript को कंपाइल और शिप किया जा सकता है.

Optimize प्लग इन

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

Optimize प्लग इन, अलग-अलग मॉड्यूल के बजाय बंडल पर काम करता है. इसलिए, यह आपके ऐप्लिकेशन के कोड और आपकी डिपेंडेंसी को बराबर प्रोसेस करता है. इससे npm से आधुनिक JavaScript डिपेंडेंसी का इस्तेमाल करना सुरक्षित हो जाता है, क्योंकि उनका कोड बंडल किया जाएगा और सही सिंटैक्स में ट्रांसपाइल किया जाएगा. यह सामान्य तरीकों से, कंपाइलेशन के दो चरणों के मुकाबले ज़्यादा तेज़ भी हो सकता है. साथ ही, मॉडर्न और लेगसी ब्राउज़र के लिए अलग-अलग बंडल जनरेट कर सकता है. बंडल के दो सेट, module/nomodule पैटर्न का इस्तेमाल करके लोड किए जाने के लिए डिज़ाइन किए गए हैं.

// webpack.config.js
const OptimizePlugin = require('optimize-plugin');

module.exports = {
  // ...
  plugins: [new OptimizePlugin()],
};

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

तुलना: सोर्स मॉड्यूल को दो बार ट्रांसपाइलिंग करना बनाम जनरेट किए गए बंडल को दो बार ट्रांसपिल करना.

BabelEsmPlugin

BabelEsmPlugin एक वेबपैक प्लग इन है. यह @babel/preset-env के साथ काम करता है, ताकि मौजूदा बंडल के आधुनिक वर्शन जनरेट किए जा सकें. इससे, आधुनिक ब्राउज़र में कम ट्रांसपाइल किए गए कोड को शिप किया जा सकता है. यह module/nomodule के लिए, पहले से मौजूद सबसे लोकप्रिय समाधान है. इसका इस्तेमाल Next.js और Preact CLI करते हैं.

// webpack.config.js
const BabelEsmPlugin = require('babel-esm-plugin');

module.exports = {
  //...
  module: {
    rules: [
      // your existing babel-loader configuration:
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [new BabelEsmPlugin()],
};

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

node_modules को ट्रांसपाइल करने के लिए, babel-loader को कॉन्फ़िगर करना

अगर पिछले दो प्लग इन में से किसी एक के बिना babel-loader का इस्तेमाल किया जा रहा है, तो आधुनिक JavaScript npm मॉड्यूल का इस्तेमाल करने के लिए, एक ज़रूरी चरण पूरा करना होगा. दो अलग-अलग babel-loader कॉन्फ़िगरेशन तय करने से, node_modules में मौजूद आधुनिक भाषा की सुविधाओं को ES2017 में अपने-आप कॉम्पाइल किया जा सकता है. साथ ही, अपने प्रोजेक्ट के कॉन्फ़िगरेशन में तय किए गए Babel प्लग इन और प्रीसेट की मदद से, पहले पक्ष के कोड को ट्रांसपाइल किया जा सकता है. इससे, मॉड्यूल/नोमॉड्यूल सेटअप के लिए मॉडर्न और लेगसी बंडल जनरेट नहीं होते. हालांकि, पुराने ब्राउज़र को नुकसान पहुंचाए बिना, ऐसे एनपीएम पैकेज इंस्टॉल और इस्तेमाल किए जा सकते हैं जिनमें मॉडर्न JavaScript हो.

webpack-plugin-modern-npm, इस तकनीक का इस्तेमाल उन npm डिपेंडेंसी को कंपाइल करने के लिए करता है जिनके package.json में "exports" फ़ील्ड होता है. ऐसा इसलिए, क्योंकि इनमें आधुनिक सिंटैक्स हो सकता है:

// webpack.config.js
const ModernNpmPlugin = require('webpack-plugin-modern-npm');

module.exports = {
  plugins: [
    // auto-transpile modern stuff found in node_modules
    new ModernNpmPlugin(),
  ],
};

इसके अलावा, इस तकनीक को अपने वेबपैक कॉन्फ़िगरेशन में मैन्युअल तरीके से भी लागू किया जा सकता है. इसके लिए, मॉड्यूल के package.json में "exports" फ़ील्ड देखें, क्योंकि उन्हें हल किया जाता है. कम शब्दों के लिए कैश मेमोरी को छोड़ने पर, पसंद के मुताबिक लागू करने की प्रोसेस कुछ इस तरह दिख सकती है:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // Transpile for your own first-party code:
      {
        test: /\.js$/i,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // Transpile modern dependencies:
      {
        test: /\.js$/i,
        include(file) {
          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
          try {
            return dir && !!require(dir[0] + 'package.json').exports;
          } catch (e) {}
        },
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: false,
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

इस तरीके का इस्तेमाल करते समय, आपको यह पक्का करना होगा कि आपके मिनीफ़ायर के साथ मॉडर्न सिंटैक्स काम करता हो. Terser और uglify-es, दोनों में {ecma: 2017} को तय करने का विकल्प होता है. इससे, कॉम्प्रेस और फ़ॉर्मैट करने के दौरान, ES2017 सिंटैक्स को बनाए रखने और कुछ मामलों में जनरेट करने में मदद मिलती है.

रोलअप

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

@rollup/प्लगइन-बेबल

Rollup का इस्तेमाल करने पर, getBabelOutputPlugin() तरीका (Rollup के आधिकारिक Babel प्लग इन से मिलता है) कोड को अलग-अलग सोर्स मॉड्यूल के बजाय, जनरेट किए गए बंडल में बदल देता है. Rollup में, एक ही बिल्ड के हिस्से के तौर पर बंडल के कई सेट जनरेट करने की सुविधा पहले से मौजूद है. हर सेट में अपने प्लग इन होते हैं. इसका इस्तेमाल करके, आधुनिक और लेगसी के लिए अलग-अलग बंडल बनाए जा सकते हैं. इसके लिए, हर बंडल को Babel आउटपुट प्लग इन के अलग-अलग कॉन्फ़िगरेशन से पास करें:

// rollup.config.js
import {getBabelOutputPlugin} from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    // modern bundles:
    {
      format: 'es',
      plugins: [
        getBabelOutputPlugin({
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {esmodules: true},
                bugfixes: true,
                loose: true,
              },
            ],
          ],
        }),
      ],
    },
    // legacy (ES5) bundles:
    {
      format: 'amd',
      entryFileNames: '[name].legacy.js',
      chunkFileNames: '[name]-[hash].legacy.js',
      plugins: [
        getBabelOutputPlugin({
          presets: ['@babel/preset-env'],
        }),
      ],
    },
  ],
};

बिल्ड करने के अन्य टूल

Rollup और webpack को ज़्यादा से ज़्यादा कॉन्फ़िगर किया जा सकता है. इसका मतलब है कि हर प्रोजेक्ट को अपने कॉन्फ़िगरेशन को अपडेट करना होगा, ताकि डिपेंडेंसी में आधुनिक JavaScript सिंटैक्स चालू किया जा सके. इसके अलावा, Parcel, Snowpack, Vite, और WMR जैसे बेहतर बिल्ड टूल भी हैं. ये कॉन्फ़िगरेशन के बजाय, कॉन्वेंशन और डिफ़ॉल्ट सेटअप को प्राथमिकता देते हैं. इनमें से ज़्यादातर टूल, यह मानते हैं कि npm डिपेंडेंसी में आधुनिक सिंटैक्स हो सकता है. साथ ही, प्रोडक्शन के लिए बिल्ड करते समय, उन्हें सही सिंटैक्स लेवल पर ट्रांसपाइल कर देंगे.

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