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

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

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

Ivan Akulov

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

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

Webpack 4 में mode का नया फ़्लैग शामिल किया गया है. आप सेट कर सकते हैं यह फ़्लैग आपके बनाए जा रहे Webpack के बारे में बताने के लिए, '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)

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

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

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

UglifyJsप्लग इन के दस्तावेज़
अन्य लोकप्रिय मिनीफ़ायर: बाबेल कम करें, Google बंद है कंपाइलर

`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 मॉड्यूल सिंटैक्स का इस्तेमाल किया जाता है, तो 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 मॉड्यूल के साथ लिखा गया हो.

हालांकि, आपको webpack के बिल्ट-इन मिनीफ़ायर (UglifyJsPlugin) का इस्तेमाल करने की ज़रूरत नहीं है. ऐसा कोई भी मिनीफ़ायर जो खराब कोड को हटाने की सुविधा देता हो (उदाहरण के लिए, Babel Minify प्लगिन या Google Close 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 की तरह काम करता है – सिवाय इसके कि यह URL वाली फ़ाइलों को कोड में बदल देता है 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'
      }
    ]
  }
};

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

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

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

JavaScript के औसत साइज़ का आधे से ज़्यादा हिस्सा डिपेंडेंसी से आता है. इस साइज़ का एक हिस्सा शायद की ज़रूरत नहीं है.

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

दूसरा उदाहरण Moment.js है. इसके 2.19.1 वर्शन में, 223 केबी का छोटा किया गया कोड लगता है, जो कि बहुत बड़ा है – एक पेज पर JavaScript का औसत साइज़ अक्टूबर में 452 केबी था 2017. हालांकि, इस साइज़ का 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 मॉड्यूल के उलट, बंडल किया जा सकता है हर वैल्यू को फ़ंक्शन से रैप किए बिना. वेबपैक 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
  }
};

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

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

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

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

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

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

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

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

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

अगर आपका नॉन-webpack कोड उन डिपेंडेंसी पर निर्भर करता है जो 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 कोड को एएमडी बंडल और उपनाम वाले मॉड्यूल के तौर पर कंपाइल करें, ताकि लाइब्रेरी के यूआरएल में इसका इस्तेमाल किया जा सके:

// 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 कोड अपनी डिपेंडेंसी लोड करने के लिए समान यूआरएल का इस्तेमाल करता है, तो ये फ़ाइलें लोड होंगी सिर्फ़ एक बार – अतिरिक्त अनुरोध, लोडर कैश मेमोरी का इस्तेमाल करेंगे.

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

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

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

खास जानकारी

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

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

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

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

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

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

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

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

NODE_ENV=production बताएं

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

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

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

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

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

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

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

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

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

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

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

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

खास जानकारी

`NODE_ENV=production` बताएं

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

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