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

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

अपने ऐप्लिकेशन को छोटा करने के लिए, वेबपैक इस्तेमाल करने का तरीका

Ivan Akulov

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

प्रोडक्शन मोड का इस्तेमाल करना (सिर्फ़ वेबपैक 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}

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

बंडल-लेवल पर काट-छांट करने की सुविधा

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

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

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

वेबपैक इसे करीब-करीब इस तरह इकट्ठा करता है:

// 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)

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

वेबपैक 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 Close Compiler

`NODE_ENV=production` बताएं

ध्यान दें: यह सिर्फ़ वेबपैक 3 है. अगर प्रोडक्शन मोड के साथ वेबपैक 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.'
);
// …

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

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

वेबपैक 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 की सभी वैल्यू को तय की गई वैल्यू से बदल दिया जाता है. ऊपर दिए गए कॉन्फ़िगरेशन का इस्तेमाल करके:

वेबपैक, 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 };
}
```

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

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

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

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

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

अगर कई एक्सपोर्ट वाली फ़ाइल बनाई जाती है, लेकिन ऐप्लिकेशन उनमें से सिर्फ़ एक का इस्तेमाल करता है:
```
// 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 मॉड्यूल में लिखा गया हो.

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

चेतावनी: ES मॉड्यूल को CommonJS में गलती से कंपाइल न करें. अगर आपने बेबल का इस्तेमाल babel-preset-env या babel-preset-es2015 के साथ किया है, तो इन प्रीसेट की सेटिंग देखें. डिफ़ॉल्ट रूप से, ये 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 का इस्तेमाल करके, उन्हें वेबपैक में ऑप्टिमाइज़ करें.

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

लोडर की डिफ़ॉल्ट सेटिंग पहले से ही लागू हैं – लेकिन अगर आप इसे आगे कॉन्फ़िगर करना चाहते हैं, तो प्लगिन विकल्प देखें. अगर आपको सही विकल्प चुनने हैं, तो ऐडी ओस्मानी की इमेज को ऑप्टिमाइज़ करने के बारे में दी गई बेहतरीन गाइड देखें.

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

"base64 एन्कोडिंग कैसे इस्तेमाल की जाती है?"
ऐडी ओस्मानी की इमेज ऑप्टिमाइज़ेशन के बारे में गाइड

Optimize डिपेंडेंसी

JavaScript के औसत साइज़ का आधे से ज़्यादा हिस्सा, डिपेंडेंसी से मिलता है. साथ ही, हो सकता है कि उस साइज़ का एक हिस्सा ग़ैर-ज़रूरी हो.

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

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

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

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

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

// 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 को हटा दिया जाता है. बंडल में कम मॉड्यूल हैं – और कम मॉड्यूल ओवरहेड हैं!

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

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

वेबपैक 3 में, ModuleConcatenationPlugin का इस्तेमाल करें:

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

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

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

मॉड्यूलConcatenationPlugin के लिए वेबपैक दस्तावेज़
“दायरे को रोकने के बारे में कम शब्दों में जानकारी”
यह प्लग इन क्या करता है, इसका पूरा ब्यौरा

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

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

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

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

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

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

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

इस कॉन्फ़िगरेशन के तहत, वेबपैक 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' लिखने पर, इस लाइब्रेरी को बंडल में शामिल नहीं किया जाएगा. यह सही है – वेबपैक को यह पता नहीं चलता कि import 'react' और import 'react/umd/react.production.min.js' एक ही चीज़ हैं या नहीं – इसलिए, सावधान रहें.

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

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

खास जानकारी

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

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

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

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

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

बंडल-लेवल पर काट-छांट करने की सुविधा

लोडर के लिए खास विकल्प

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

NODE_ENV=production बताएं

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

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

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

इमेज ऑप्टिमाइज़ करें

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

Optimize डिपेंडेंसी

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

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

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

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

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

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

खास जानकारी

`NODE_ENV=production` बताएं

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

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