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

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

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

Ivan Akulov

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

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

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

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

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

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

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 मिनिफ़ायर का इस्तेमाल करता है. (अगर आपको कभी भी छोटा करने की सुविधा बंद करनी है, तो सिर्फ़ डेवलपमेंट मोड का इस्तेमाल करें या false को optimization.minimize विकल्प पर पास करें.)

webpack 3 में, आपको सीधे UglifyJS प्लग इन का इस्तेमाल करना होगा. यह प्लग इन, वेबपैक के साथ बंडल में आता है. इसे चालू करने के लिए, इसे कॉन्फ़िगरेशन के 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 भी इसी तरह काम करता है – यह एक डेवलपमेंट बिल्ड लोड करता है, जिसमें चेतावनियां शामिल होती हैं:

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

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

ModuleConcatenationPlugin के लिए 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 में डिपेंडेंसी को एक्सपोज़ नहीं करता है, तो चीज़ें ज़्यादा मुश्किल हो जाती हैं. हालांकि, अगर नॉन-वेबपैक कोड, इन डिपेंडेंसी को एएमडी पैकेज के तौर पर इस्तेमाल करता है, तो एक ही कोड को दो बार लोड होने से बचाया जा सकता है.

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

// 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` में डिपेंडेंसी उपलब्ध हैं