इस पेज का अनुवाद Cloud Translation API से किया गया है.

फ़्रंट-एंड साइज़ घटाएं

अपने ऐप्लिकेशन को जितना हो सके उतना छोटा बनाने के लिए, webpack का इस्तेमाल करने का तरीका

Ivan Akulov

किसी ऐप्लिकेशन को ऑप्टिमाइज़ करते समय, सबसे पहले उसे जितना हो सके उतना छोटा बनाएं. webpack की मदद से ऐसा करने का तरीका यहां बताया गया है.

प्रोडक्शन मोड का इस्तेमाल करना (सिर्फ़ webpack 4 के लिए)

Webpack 4 में mode का नया फ़्लैग शामिल किया गया है. इस फ़्लैग को 'development' या 'production' पर सेट करके, वेबपैक को यह संकेत दिया जा सकता है कि ऐप्लिकेशन को किसी खास एनवायरमेंट के लिए बनाया जा रहा है:

// webpack.config.js
module.exports = {
  mode: 'production',
};

प्रोडक्शन के लिए ऐप्लिकेशन बनाते समय, production मोड चालू करना न भूलें. इससे webpack ऑप्टिमाइज़ेशन लागू किया जा सकता है. जैसे, छोटा करना, लाइब्रेरी से सिर्फ़ डेवलपमेंट कोड हटाना, वगैरह.

इसके बारे में और पढ़ें

mode फ़्लैग किन खास चीज़ों को कॉन्फ़िगर करता है

छोटा करने की सुविधा चालू करें

कोड को छोटा करने का मतलब है, अतिरिक्त स्पेस हटाना, वैरिएबल के नाम छोटा करना वगैरह करके, कोड को कंप्रेस करना. इस तरह:

// Original code
function map(array, iteratee) {
  let index = -1;
  const length = array == null ? 0 : array.length;
  const result = new Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

↓

// Minified code
function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}

Webpack में कोड को छोटा करने के दो तरीके हैं: बंडल-लेवल पर छोटा करना और लोडर के हिसाब से विकल्प. इनका इस्तेमाल एक साथ किया जाना चाहिए.

बंडल-लेवल छोटा करना

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

आप कोड इस तरह लिखते हैं:

// comments.js
import './comments.css';
export function render(data, target) {
  console.log('Rendered!');
}

Webpack इसे करीब-करीब इसमें इकट्ठा करता है:

// bundle.js (part of)
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["render"] = render;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default =
__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__);

function render(data, target) {
console.log('Rendered!');
}

मिनिफ़ायर इसे करीब-करीब इस तरह से कंप्रेस करता है:

// minified bundle.js (part of)
"use strict";function t(e,n){console.log("Rendered!")}
Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)

webpack 4 में, बंडल-लेवल पर काट-छांट करने की सुविधा अपने-आप चालू हो जाती है – प्रोडक्शन मोड में और इसके बिना भी. यह हुड के नीचे, UglifyJS Minifier का इस्तेमाल करता है. (अगर आपको कभी भी छोटा करने की सुविधा बंद करनी है, तो सिर्फ़ डेवलपमेंट मोड का इस्तेमाल करें या false को optimization.minimize विकल्प पर पास करें.)

webpack 3 में, आपको सीधे UglifyJS प्लगिन का इस्तेमाल करना होगा. प्लग इन, webpack के साथ आता है. इसे चालू करने के लिए, इसे कॉन्फ़िगरेशन के plugins सेक्शन में जोड़ें:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

ध्यान दें: webpack 3 में, UglifyJS प्लगिन, ES2015+ (ES6+) कोड को कंपाइल नहीं कर सकता. इसका मतलब है कि अगर आपके कोड में क्लास, ऐरो फ़ंक्शन या भाषा की अन्य नई सुविधाओं का इस्तेमाल किया गया है और आपने उन्हें ES5 में कंपाइल नहीं किया है, तो प्लग इन गड़बड़ी का मैसेज दिखाएगा.

अगर आपको नए सिंटैक्स को कंपाइल करना है, तो uglifyjs-webpack-plugin पैकेज का इस्तेमाल करें. यह वही प्लगिन है जो webpack के साथ बंडल किया गया है, लेकिन इसके बाद का है. साथ ही, इसमें ES2015+ कोड को कंपाइल किया जा सकता है.

लोडर के हिसाब से विकल्प

कोड को छोटा करने का दूसरा तरीका, लोडर के हिसाब से विकल्पों का इस्तेमाल करना है (लोडर क्या है). लोडर विकल्पों से, आप उन चीज़ों को कंप्रेस कर सकते हैं जिन्हें छोटा करने वाला टूल छोटा नहीं कर सकता. उदाहरण के लिए, css-loader के साथ सीएसएस फ़ाइल इंपोर्ट करने पर, फ़ाइल को स्ट्रिंग में कंपाइल किया जाता है:

/* comments.css */
.comment {
  color: black;
}

// minified bundle.js (part of)
exports=module.exports=__webpack_require__(1)(),
exports.push([module.i,".comment {\r\n  color: black;\r\n}",""]);

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { minimize: true } },
        ],
      },
    ],
  },
};

इसके बारे में और पढ़ें

UglifyJsPlugin के दस्तावेज़
अन्य लोकप्रिय मिनिफ़ायर: Babel Minify, Google Closure Compiler

`NODE_ENV=production` बताएं

ध्यान दें: यह सिर्फ़ Webpack 3 है. अगर प्रोडक्शन मोड के साथ webpack 4 का इस्तेमाल किया जाता है, तो NODE_ENV=production ऑप्टिमाइज़ेशन पहले से ही चालू है. इस सेक्शन को छोड़ दें.

फ़्रंट-एंड का साइज़ कम करने का एक और तरीका है, अपने कोड में NODE_ENV एनवायरमेंट वैरिएबल को वैल्यू production पर सेट करना.

लाइब्रेरी, NODE_ENV वैरिएबल को पढ़कर यह पता लगाती हैं कि उन्हें किस मोड में काम करना चाहिए – डेवलपमेंट या प्रोडक्शन मोड में. इस वैरिएबल के आधार पर, कुछ लाइब्रेरी अलग तरीके से काम करती हैं. उदाहरण के लिए, जब NODE_ENV को production पर सेट नहीं किया जाता है, तो Vue.js अतिरिक्त जांच करता है और चेतावनियां प्रिंट करता है:

// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}
// …

प्रतिक्रिया देने की सुविधा भी इसी तरह से काम करती है – यह एक डेवलपमेंट बिल्ड लोड करती है, जिसमें चेतावनियां शामिल होती हैं:

// react/index.js
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// react/cjs/react.development.js
// …
warning$3(
    componentClass.getDefaultProps.isReactClassApproved,
    'getDefaultProps is only used on classic React.createClass ' +
    'definitions. Use a static property named `defaultProps` instead.'
);
// …

आम तौर पर, इस तरह की जांच और चेतावनियां प्रोडक्शन के दौरान ज़रूरी नहीं होती हैं. हालांकि, ये कोड में बनी रहती हैं और लाइब्रेरी का साइज़ बढ़ा देती हैं. webpack 4 में, optimization.nodeEnv: 'production' विकल्प जोड़कर इन्हें हटाएं:

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    nodeEnv: 'production',
    minimize: true,
  },
};

webpack 3 में, इसके बजाय DefinePlugin का इस्तेमाल करें:

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
};

optimization.nodeEnv विकल्प और DefinePlugin, दोनों एक ही तरह से काम करते हैं – वे process.env.NODE_ENV की सभी वैल्यू को, दी गई वैल्यू से बदल देते हैं. ऊपर दिए गए कॉन्फ़िगरेशन के साथ:

Webpack, process.env.NODE_ENV के सभी इंस्टेंस को "production" से बदल देगा:

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}

↓

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

इसके बाद, मिनीफ़ायर ऐसी सभी if ब्रांच हटा देता है – क्योंकि "production" !== 'production' हमेशा गलत होता है. साथ ही, प्लगिन यह समझता है कि इन ब्रांच में मौजूद कोड कभी काम नहीं करेगा:

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

↓

// vue/dist/vue.runtime.esm.js (without minification)
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
}

इसके बारे में और पढ़ें

“एनवायरमेंट वैरिएबल” क्या होते हैं
इसके बारे में Webpack दस्तावेज़: DefinePlugin, EnvironmentPlugin

ES मॉड्यूल का इस्तेमाल करें

फ़्रंट-एंड का साइज़ कम करने का दूसरा तरीका, ES मॉड्यूल का इस्तेमाल करना है.

ES मॉड्यूल का इस्तेमाल करने पर, webpack ट्री-शैकिंग कर सकता है. ट्री शेकिंग तब होता है, जब कोई बंडलर पूरे डिपेंडेंसी ट्री को पार करता है, जांच करता है कि कौनसी डिपेंडेंसी इस्तेमाल की गई हैं, और इस्तेमाल नहीं की गई डिपेंडेंसी हटा देता है. इसलिए, अगर ES मॉड्यूल सिंटैक्स का इस्तेमाल किया जाता है, तो वेबपैक उस कोड को हटा सकता है जिसका इस्तेमाल नहीं किया गया है:

कई एक्सपोर्ट वाली फ़ाइल लिखी जाती है, लेकिन ऐप्लिकेशन इनमें से सिर्फ़ एक का इस्तेमाल करता है:
```
// comments.js
export const render = () => { return 'Rendered!'; };
export const commentRestEndpoint = '/rest/comments';

// index.js
import { render } from './comments.js';
render();
```

Webpack समझता है कि commentRestEndpoint का इस्तेमाल नहीं किया जाता है और यह बंडल में अलग से एक्सपोर्ट पॉइंट जनरेट नहीं करता है:

// bundle.js (part that corresponds to comments.js)
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const render = () => { return 'Rendered!'; };
/* harmony export (immutable) */ __webpack_exports__["a"] = render;

const commentRestEndpoint = '/rest/comments';
/* unused harmony export commentRestEndpoint */
})

मिनिमाइज़र, इस्तेमाल नहीं किए गए वैरिएबल को हटा देता है:
```
// bundle.js (part that corresponds to comments.js)
(function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})
```

यह सुविधा, लाइब्रेरी के साथ भी काम करती है. हालांकि, इसके लिए ज़रूरी है कि लाइब्रेरी को ES मॉड्यूल के साथ लिखा गया हो.

हालांकि, आपको webpack के बिल्ट-इन मिनीफ़ायर (UglifyJsPlugin) का इस्तेमाल करने की ज़रूरत नहीं है. कोई भी ऐसा मिनिफ़ायर जो काम न करने वाले कोड को हटाने की सुविधा देता है, जैसे कि Babel Minify प्लग इन या Google Closure Compiler प्लग इन, काम करेगा.

चेतावनी: ES मॉड्यूल को CommonJS मॉड्यूल में गलती से इकट्ठा न करें. अगर babel-preset-env या babel-preset-es2015 के साथ Babel का इस्तेमाल किया जाता है, तो इन प्रीसेट की सेटिंग देखें. डिफ़ॉल्ट रूप से, वे ES के import और export को CommonJS के require और module.exports में ट्रांसपल करते हैं. इसे बंद करने के लिए, { modules: false } विकल्प पास करें. TypeScript के लिए भी यही बात लागू होती है: अपने tsconfig.json में { "compilerOptions": { "module": "es2015" } } सेट करना न भूलें.

इसके बारे में और पढ़ें

“ES6 मॉड्यूल के बारे में ज़्यादा जानकारी”
ट्री शेकिंग के बारे में Webpack दस्तावेज़

चित्र अनुकूलित करें

इमेज, पेज साइज़ का आधे से ज़्यादा हिस्सा होती हैं. हालांकि, वे JavaScript की तरह ज़रूरी नहीं हैं (उदाहरण के लिए, वे रेंडरिंग को ब्लॉक नहीं करते), फिर भी वे बैंडविड्थ का एक बड़ा हिस्सा खाते हैं. url-loader, svg-url-loader, और image-webpack-loader का इस्तेमाल करके, webpack में इन्हें ऑप्टिमाइज़ करें.

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'url-loader',
        options: {
          // Inline files smaller than 10 kB (10240 bytes)
          limit: 10 * 1024,
        },
      },
    ],
  }
};

// index.js
import imageUrl from './image.png';
// → If image.png is smaller than 10 kB, `imageUrl` will include
// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
// → If image.png is larger than 10 kB, the loader will create a new file,
// and `imageUrl` will include its url: `/2fcd56a1920be.png`

ध्यान दें: इनलाइन इमेज से अलग-अलग अनुरोधों की संख्या कम हो जाती है, जो अच्छी बात है (एचटीटीपी/2 के साथ भी). हालांकि, इससे बंडल के डाउनलोड/पार्स समय में बढ़ोतरी होती है और मेमोरी का इस्तेमाल करने में लगने वाला समय बढ़ जाता है. पक्का करें कि बड़ी इमेज या बहुत सारी इमेज को एम्बेड न किया जाए. ऐसा करने पर, बंडल लोड होने में लगने वाला समय बढ़ जाएगा और इनलाइन करने के फ़ायदे कम हो जाएंगे.

svg-url-loader, url-loader की तरह ही काम करता है – हालांकि, यह Base64 कोड के बजाय यूआरएल कोड में बदलने की सुविधा वाली फ़ाइलों को कोड में बदल देता है. यह SVG इमेज के लिए काम का है – SVG फ़ाइलें सिर्फ़ एक सादा टेक्स्ट होती हैं. इसलिए, कोड में बदलने का यह तरीका ज़्यादा साइज़ का होता है.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: "svg-url-loader",
        options: {
          limit: 10 * 1024,
          noquotes: true
        }
      }
    ]
  }
};

image-webpack-loader इमेज को कंप्रेस कर देता है. यह JPG, PNG, GIF, और SVG इमेज के साथ काम करता है. इसलिए, हम इसका इस्तेमाल इन सभी इमेज के लिए करेंगे.

यह लोडर, ऐप्लिकेशन में इमेज एम्बेड नहीं करता. इसलिए, यह url-loader और svg-url-loader के साथ काम करना चाहिए. इसे दोनों नियमों (एक JPG/PNG/GIF इमेज के लिए और दूसरा SVG) के लिए) कॉपी करके चिपकाने से बचने के लिए, हम इस लोडर को enforce: 'pre' के साथ एक अलग नियम के रूप में शामिल करेंगे:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'image-webpack-loader',
        // This will apply the loader before the other ones
        enforce: 'pre'
      }
    ]
  }
};

लोडर की डिफ़ॉल्ट सेटिंग पहले से ही काम करती हैं – लेकिन अगर आप इसे और कॉन्फ़िगर करना चाहते हैं, तो प्लग इन विकल्प देखें. कौनसे विकल्प चुनने हैं, यह तय करने के लिए Addy Osmani की इमेज ऑप्टिमाइज़ेशन के बारे में बेहतरीन गाइड देखें.

इसके बारे में और पढ़ें

डिपेंडेंसी ऑप्टिमाइज़ करना

JavaScript के औसत साइज़ का आधे से ज़्यादा हिस्सा, डिपेंडेंसी से आता है. इस साइज़ का कुछ हिस्सा शायद गै़र-ज़रूरी हो.

उदाहरण के लिए, Lodash (v4.17.4 के हिसाब से) बंडल में 72 केबी का छोटा किया गया कोड जोड़ता है. अगर आप इसके सिर्फ़ 20 तरीकों का इस्तेमाल करते हैं, तो करीब 65 केबी का छोटा किया गया कोड कुछ नहीं कर पाता.

दूसरा उदाहरण Moment.js है. इसका 2.19.1 वर्शन, छोटा किया गया 223 केबी कोड लेता है, जो कि बहुत बड़ा है. किसी पेज पर JavaScript का औसत साइज़ अक्टूबर 2017 में 452 केबी था. हालांकि, इस साइज़ में से 170 केबी लोकलाइज़ेशन फ़ाइलें हैं. अगर आपने कई भाषाओं के साथ Moment.js का इस्तेमाल नहीं किया है, तो ये फ़ाइलें बिना किसी वजह के बंडल को बड़ा कर देंगी.

इन सभी डिपेंडेंसी को आसानी से ऑप्टिमाइज़ किया जा सकता है. हमने GitHub पर मौजूद एक डेटा स्टोर करने की जगह में, ऑप्टिमाइज़ेशन के तरीकों को इकट्ठा किया है – इसे देखें!

ES मॉड्यूल (यानी स्कोप होस्टिंग) के लिए, मॉड्यूल जोड़ने की सुविधा चालू करें

बंडल बनाते समय, webpack हर मॉड्यूल को फ़ंक्शन में रैप कर रहा है:

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// bundle.js (part  of)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
  Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_exports__["a"] = render;
  function render(data, target) {
    console.log('Rendered!');
  }
})

पहले, CommonJS/AMD मॉड्यूल को एक-दूसरे से अलग करने के लिए इसकी ज़रूरत पड़ती थी. हालांकि, इससे हर मॉड्यूल का साइज़ और परफ़ॉर्मेंस पर असर पड़ा.

Webpack 2 ने ES मॉड्यूल के लिए सहायता उपलब्ध कराई है, जो CommonJS और AMD मॉड्यूल के उलट, हर एक को फ़ंक्शन के साथ रैप किए बिना बंडल किया जा सकता है. साथ ही, webpack 3 ने इस तरह का बंडल बनाना मुमकिन कर दिया है – इसके लिए, मॉड्यूल जोड़ने की सुविधा का इस्तेमाल किया जा सकता है. यहां बताया गया है कि मॉड्यूल जोड़ने की प्रोसेस क्या काम करती है:

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// Unlike the previous snippet, this bundle has only one module
// which includes the code from both files

// bundle.js (part of; compiled with ModuleConcatenationPlugin)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

  // CONCATENATED MODULE: ./comments.js
    function render(data, target) {
    console.log('Rendered!');
  }

  // CONCATENATED MODULE: ./index.js
  render();
})

अंतर दिख रहा है? सादे बंडल में, मॉड्यूल 0 को मॉड्यूल 1 के लिए render की ज़रूरत थी. मॉड्यूल जोड़ने की प्रोसेस से, require को सिर्फ़ ज़रूरी फ़ंक्शन से बदल दिया जाता है और मॉड्यूल 1 को हटा दिया जाता है. बंडल में कम मॉड्यूल होते हैं – और मॉड्यूल का ओवरहेड भी कम होता है!

इस सुविधा को चालू करने के लिए, webpack 4 में optimization.concatenateModules विकल्प को चालू करें:

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    concatenateModules: true
  }
};

webpack 3 में, ModuleConcatenationPlugin का इस्तेमाल करें:

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

इसके बारे में और पढ़ें

ModuleConcatenationप्लगिन के लिए Webpack दस्तावेज़
“स्कोप को होइस्ट करने के बारे में कम शब्दों में जानकारी”
इस बात का विस्तृत विवरण कि यह प्लगिन क्या करता है

अगर आपके पास वेबपैक और नॉन-वेबपैक, दोनों तरह के कोड हैं, तो `externals` का इस्तेमाल करें

ऐसा हो सकता है कि आपके पास एक बड़ा प्रोजेक्ट हो, जिसमें कुछ कोड को वेबपैक के साथ और कुछ कोड को बिना वेबपैक के कंपाइल किया गया हो. जैसे, वीडियो होस्ट करने वाली कोई साइट, जहां प्लेयर विजेट को वेबपैक से बनाया गया हो और आस-पास के पेज को न बनाया गया हो:

वीडियो होस्टिंग साइट का स्क्रीनशॉट — (वीडियो होस्ट करने वाली पूरी तरह से रैंडम साइट)

अगर कोड के दोनों हिस्से एक-दूसरे पर समान रूप से निर्भर हैं, तो उनके कोड को कई बार डाउनलोड होने से बचाने के लिए, उन्हें शेयर किया जा सकता है. ऐसा webpack के externals विकल्प की मदद से किया जाता है – यह मॉड्यूल को वैरिएबल या अन्य बाहरी इंपोर्ट से बदल देता है.

अगर `window` में डिपेंडेंसी उपलब्ध हैं

ऐसा हो सकता है कि आपका नॉन-वेबपैक कोड, उन डिपेंडेंसी पर निर्भर करता हो जो window में वैरिएबल के तौर पर उपलब्ध हैं. ऐसे में, दूसरे नाम वाली डिपेंडेंसी के नामों को वैरिएबल के नामों के लिए इस्तेमाल किया जाता है:

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

इस कॉन्फ़िगरेशन की मदद से, webpack react और react-dom पैकेज को बंडल नहीं करेगा. इसके बजाय, उन्हें कुछ इस तरह से बदल दिया जाएगा:

// bundle.js (part of)
(function(module, exports) {
  // A module that exports `window.React`. Without `externals`,
  // this module would include the whole React bundle
  module.exports = React;
}),
(function(module, exports) {
  // A module that exports `window.ReactDOM`. Without `externals`,
  // this module would include the whole ReactDOM bundle
  module.exports = ReactDOM;
})

अगर डिपेंडेंसी, AMD पैकेज के तौर पर लोड की जाती हैं

अगर आपका नॉन-वेबपैक कोड, window पर डिपेंडेंसी नहीं दिखाता है, तो चीज़ें ज़्यादा जटिल हो जाती हैं. हालांकि, अगर नॉन-वेबपैक कोड इन डिपेंडेंसी का इस्तेमाल एएमडी पैकेज की तरह करता है, तो अब भी एक ही कोड को दो बार लोड करने से बचा जा सकता है.

ऐसा करने के लिए, Webpack कोड को एएमडी बंडल और उपनाम वाले मॉड्यूल के तौर पर कंपाइल करें, ताकि लाइब्रेरी के यूआरएल में इसका इस्तेमाल किया जा सके:

// webpack.config.js
module.exports = {
  output: {
    libraryTarget: 'amd'
  },
  externals: {
    'react': {
      amd: '/libraries/react.min.js'
    },
    'react-dom': {
      amd: '/libraries/react-dom.min.js'
    }
  }
};

Webpack, बंडल को define() में रैप करेगा और इसे इन यूआरएल पर निर्भर करेगा:

// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });

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

ध्यान दें: Webpack सिर्फ़ उन इंपोर्ट की जगह लेता है जो externals ऑब्जेक्ट की कुंजियों से पूरी तरह मेल खाते हैं. इसका मतलब है कि import React from 'react/umd/react.production.min.js' लिखने पर, इस लाइब्रेरी को बंडल में शामिल नहीं किया जाएगा. यह सही है – webpack को पता नहीं होता कि import 'react' और import 'react/umd/react.production.min.js' एक ही हैं या नहीं – इसलिए, सावधान रहें.

इसके बारे में और पढ़ें

externals पर Webpack दस्तावेज़

खास जानकारी

अगर वेबपैक 4 का इस्तेमाल किया जा रहा है, तो प्रोडक्शन मोड चालू करें
बंडल-लेवल के मिनिफ़ायर और लोडर के विकल्पों की मदद से, अपने कोड को छोटा करना
NODE_ENV को production से बदलकर, सिर्फ़ डेवलपमेंट कोड को हटाएं
पेड़ के झटकों की सुविधा चालू करने के लिए, ES मॉड्यूल का इस्तेमाल करें
इमेज को कंप्रेस करें
डिपेंडेंसी से जुड़े ऑप्टिमाइज़ेशन लागू करें
मॉड्यूल को जोड़ने की सुविधा चालू करना
अगर आपको externals का इस्तेमाल करना है, तो

फ़्रंट-एंड साइज़ घटाएं

प्रोडक्शन मोड का इस्तेमाल करना (सिर्फ़ webpack 4 के लिए)

इसके बारे में और पढ़ें

छोटा करने की सुविधा चालू करें

बंडल-लेवल छोटा करना

लोडर के हिसाब से विकल्प

इसके बारे में और पढ़ें

NODE_ENV=production बताएं

इसके बारे में और पढ़ें

ES मॉड्यूल का इस्तेमाल करें

इसके बारे में और पढ़ें

चित्र अनुकूलित करें

इसके बारे में और पढ़ें

डिपेंडेंसी ऑप्टिमाइज़ करना

ES मॉड्यूल (यानी स्कोप होस्टिंग) के लिए, मॉड्यूल जोड़ने की सुविधा चालू करें

इसके बारे में और पढ़ें

अगर आपके पास वेबपैक और नॉन-वेबपैक, दोनों तरह के कोड हैं, तो externals का इस्तेमाल करें

अगर window में डिपेंडेंसी उपलब्ध हैं

अगर डिपेंडेंसी, AMD पैकेज के तौर पर लोड की जाती हैं

इसके बारे में और पढ़ें

खास जानकारी

`NODE_ENV=production` बताएं

अगर आपके पास वेबपैक और नॉन-वेबपैक, दोनों तरह के कोड हैं, तो `externals` का इस्तेमाल करें

अगर `window` में डिपेंडेंसी उपलब्ध हैं