तेज़ी से काम करने वाले ऐप्लिकेशन के लिए आधुनिक 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)
• एक साथ काम नहीं करने वाली/इंतज़ार की सुविधा (ES2017)

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

लेगसी JavaScript

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

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

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

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

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

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

"exports" फ़ील्ड में बताए गए मॉड्यूल कम से कम एक नोड वर्शन का इस्तेमाल करते हैं 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"
}

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

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

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

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

Webpack

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

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

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

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

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

Optimize प्लग इन

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

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

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

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

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

BabelEsmPlugin

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

// 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, मौजूदा Webpack कॉन्फ़िगरेशन में आसानी से इंटिग्रेट करने के लिए और इसे सबसे ज़्यादा सुविधाजनक विकल्पों में से एक बनाती है.

बेबेल-लोडर को ट्रांसपाइल node_modules पर कॉन्फ़िगर करें

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

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

// 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/प्लगइन-बेबल

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

// 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'],
        }),
      ],
    },
  ],
};

बिल्ड के अतिरिक्त टूल

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

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