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

लंबे समय तक कैश मेमोरी में सेव करने की सुविधा का इस्तेमाल करना

Webpack, ऐसेट को कैश मेमोरी में सेव करने में कैसे मदद करता है

Ivan Akulov

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

बंडल वर्शन और कैश मेमोरी हेडर का इस्तेमाल करना

कैश मेमोरी में डेटा सेव करने का सामान्य तरीका यह है:

ब्राउज़र को किसी फ़ाइल को बहुत लंबे समय (जैसे, एक साल) के लिए कैश मेमोरी में सेव करने के लिए कहें:
```
# Server header
Cache-Control: max-age=31536000
```
अगर आपको नहीं पता कि Cache-Control क्या करता है, तो जेक आर्चिबाल्ड की बेहतरीन पोस्ट कैशिंग के लिए तरीके.
और जब फ़ाइल को ज़बरदस्ती फिर से डाउनलोड करने में बदला जाता है, तो उसका नाम बदलें:
```

<script src="./index-v15.js"></script>


<script src="./index-v16.js"></script>
```

यह तरीका ब्राउज़र को JS फ़ाइल डाउनलोड करने, उसे कैश मेमोरी में सेव करने, और कैश मेमोरी में सेव की गई कॉपी. फ़ाइल का नाम बदलने पर ही ब्राउज़र नेटवर्क से कनेक्ट होगा (या अगर साल बीत जाता है).

webpack के साथ, ऐसा ही किया जा सकता है. हालांकि, वर्शन नंबर के बजाय, यह तय किया जाता है कि फ़ाइल हैश के साथ दिखता है. फ़ाइल के नाम में हैश शामिल करने के लिए, इसका इस्तेमाल करें [chunkhash]:

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.[chunkhash].js' // → bundle.8e0d62a03.js
  }
};

अगर आपको फ़ाइल नाम को क्लाइंट को भेजने के लिए, HtmlWebpackPlugin या WebpackManifestPlugin.

HtmlWebpackPlugin आसान, लेकिन कम सुविधाजनक तरीके से. कंपाइलेशन के दौरान, यह प्लगिन एचटीएमएल फ़ाइल जिसमें इकट्ठा किए गए सभी संसाधन शामिल हैं. अगर आपका सर्वर लॉजिक नहीं है तो आपके लिए यह काफ़ी होना चाहिए:

<!-- index.html -->
<!DOCTYPE html>
<!-- ... -->
<script src="bundle.8e0d62a03.js"></script>

कॉन्टेंट बनाने WebpackManifestPlugin एक अधिक सुविधाजनक तरीका है, जो उस स्थिति में उपयोगी है, जब आपके पास कोई जटिल सर्वर हिस्सा हो. बिल्ड के दौरान, यह एक JSON फ़ाइल जनरेट करता है. इसमें फ़ाइल के नामों के बीच मैपिंग होती है हैश के साथ फ़ाइल नाम और हैश के बिना. पता लगाने के लिए सर्वर पर इस JSON का इस्तेमाल करें किस फ़ाइल के साथ काम करना है:

// manifest.json
{
  "bundle.js": "bundle.8e0d62a03.js"
}

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

जेक आर्चिबाल्ड कैश मेमोरी में डेटा सेव करने की बेहतरीन सुविधा के बारे में जानकारी तरीके

डिपेंडेंसी और रनटाइम को एक अलग फ़ाइल में निकालें

डिपेंडेंसी

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

डिपेंडेंसी को अलग-अलग डेटा ग्रुप में निकालने के लिए, तीन चरण पूरे करें:

आउटपुट फ़ाइल के नाम को [name].[chunkname].js से बदलें:
```
// webpack.config.js
module.exports = {
  output: {
    // Before
    filename: 'bundle.[chunkhash].js',
    // After
    filename: '[name].[chunkhash].js'
  }
};
```
जब webpack ऐप्लिकेशन बनाया जाता है, तो यह [name] की जगह ले लेता है हर हिस्से का नाम रखें. अगर हम [name] वाला हिस्सा नहीं जोड़ते हैं, तो हैश के आधार पर डेटा को अलग-अलग सेगमेंट में बांटना – यह काफ़ी मुश्किल है!
entry फ़ील्ड को किसी ऑब्जेक्ट में बदलें:
```
// webpack.config.js
module.exports = {
  // Before
  entry: './index.js',
  // After
  entry: {
    main: './index.js'
  }
};
```
इस स्निपेट में, "मुख्य" किसी हिस्से का नाम होता है. इस नाम को इससे बदला जाएगा स्थान 1 में [name].

अब तक, अगर आपने ऐप्लिकेशन बनाया है, तो इस डेटा ग्रुप में पूरा ऐप्लिकेशन कोड शामिल हो जाएगा – बस जैसे कि हमने इन चरणों को पूरा नहीं किया है. हालांकि, यह एक सेकंड में बदल जाएगा.
Webpack 4 में, optimization.splitChunks.chunks: 'all' विकल्प जोड़ें इसे अपने Webpack कॉन्फ़िगरेशन में शामिल करें:
```
// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};
```
इस विकल्प की मदद से, स्मार्ट कोड को बांटा जा सकता है. इसकी मदद से, webpack वेंडर कोड को एक्सट्रैक्ट करेगा, अगर: यह 30 केबी (छोटा करने की सुविधा और gzip से पहले) से ज़्यादा बड़ा हो जाता है. इससे सामान्य कोड भी एक्सट्रैक्ट हो जाएगा – यह तब फ़ायदेमंद होता है, जब आपके बिल्ड में कई बंडल बनाए जाते हैं (जैसे, ऐप्लिकेशन को अलग-अलग रूट में बांटा जाता है).

Webpack 3 में, CommonsChunkPlugin जोड़ें:
```
// webpack.config.js (for webpack 3)
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    // A name of the chunk that will include the dependencies.
    // This name is substituted in place of [name] from step 1
    name: 'vendor',

    // A function that determines which modules to include into this chunk
    minChunks: module => module.context && module.context.includes('node_modules'),
    })
  ]
};
```
यह प्लगिन उन सभी मॉड्यूल को लेता है जिनके पाथ में node_modules और उन्हें एक अलग फ़ाइल में ले जाता है, जिसे vendor.[chunkhash].js कहते हैं.

इन बदलावों के बाद, हर बिल्ड एक फ़ाइल के बजाय दो फ़ाइलें जनरेट करेगा: main.[chunkhash].js और vendor.[chunkhash].js (वेबपैक 4 के लिए vendors~main.[chunkhash].js). Webpack 4 के मामले में, डिपेंडेंसी छोटी होने पर, हो सकता है कि वेंडर बंडल जनरेट न हो. इसके लिए, इसमें कोई दिक्कत नहीं है:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
                        Asset      Size  Chunks             Chunk Names
 ./main.00bab6fd3100008a42b0.js   82 kB       0  [emitted]  main
./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor

ब्राउज़र इन फ़ाइलों को अलग से कैश मेमोरी में सेव करता है. साथ ही, सिर्फ़ बदलने वाले कोड को फिर से डाउनलोड करता है.

Webpack रनटाइम कोड

माफ़ करें, सिर्फ़ वेंडर कोड निकालना ही काफ़ी नहीं है. अगर आपको ऐप्लिकेशन कोड में कुछ बदलें:

// index.js
…
…

// E.g. add this:
console.log('Wat');

आपको vendor हैश में भी बदलाव दिखेगा:

                           Asset   Size  Chunks             Chunk Names
./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor

↓

                            Asset   Size  Chunks             Chunk Names
./vendor.e6ea4504d61a1cc1c60b.js  47 kB       1  [emitted]  vendor

ऐसा इसलिए होता है, क्योंकि मॉड्यूल के कोड के अलावा, webpack बंडल में a रनटाइम – एक छोटा सा कोड होता है जो मॉड्यूल एक्ज़ीक्यूशन को मैनेज करता है. कोड को कई फ़ाइलों में बांटने पर, कोड का यह हिस्सा भाग आईडी और समूह आईडी के बीच मैपिंग सहित शुरू होता है संबंधित फ़ाइलें:

// vendor.e6ea4504d61a1cc1c60b.js
script.src = __webpack_require__.p + chunkId + "." + {
    "0": "2f2269c7f0a55a5c1871"
}[chunkId] + ".js";

Webpack इस रनटाइम को जनरेट किए गए आखिरी हिस्से में शामिल करता है, जो कि vendor है वह भी इस मामले में. साथ ही, जब भी कोई डेटा ग्रुप बदलता है, तो कोड का यह हिस्सा भी बदलता है, जिससे पूरा vendor हिस्सा बदल गया.

इसे हल करने के लिए, रनटाइम को किसी अलग फ़ाइल में ले जाएं. webpack 4 में, यह है optimization.runtimeChunk विकल्प को चालू करने पर, इनमें से कोई भी कार्रवाई की जा सकती है:

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

वेबपैक 3 में ऐसा करने के लिए,CommonsChunkPlugin की मदद से एक और खाली हिस्सा बनाएं:

// webpack.config.js (for webpack 3)
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: module => module.context && module.context.includes('node_modules')
    }),
    // This plugin must come after the vendor one (because webpack
    // includes runtime into the last chunk)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      // minChunks: Infinity means that no app modules
      // will be included into this chunk
      minChunks: Infinity
    })
  ]
};

इन बदलावों के बाद, हर बिल्ड के लिए तीन फ़ाइलें जनरेट होंगी:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
                            Asset     Size  Chunks             Chunk Names
   ./main.00bab6fd3100008a42b0.js    82 kB       0  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       1  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

इन्हें index.html में उलटे क्रम में शामिल करें – और हो गया:

<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
<script src="./vendor.26886caf15818fa82dfa.js"></script>
<script src="./main.00bab6fd3100008a42b0.js"></script>

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

अतिरिक्त एचटीटीपी अनुरोध को सेव करने के लिए इनलाइन Webpack रनटाइम

चीज़ों को और भी बेहतर बनाने के लिए, Webpack रनटाइम को एचटीएमएल में इनलाइन करके देखें जवाब. उदाहरण के लिए, इसके बजाय:

<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>

यह करें:

<!-- index.html -->
<script>
!function(e){function n(r){if(t[r])return t[r].exports;…}} ([]);
</script>

रनटाइम छोटा है और इसे इनलाइन करने से आपको एचटीटीपी अनुरोध को सेव करने में मदद मिलेगी एचटीटीपी/1 के साथ ज़रूरी है; HTTP/2 के साथ कम ज़रूरी है, लेकिन फिर भी इफ़ेक्ट).

आइए जानते हैं कि इसे कैसे किया जाए.

अगर htmlWebpackप्लग इन की मदद से एचटीएमएल जनरेट किया जाता है

अगर आपको जनरेट करने के लिए HtmlWebpackPlugin इस्तेमाल करें एचटीएमएल फ़ाइल, InlineSourcePlugin आपको बस इनकी ज़रूरत है:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      inlineSource: 'runtime~.+\\.js',
    }),
    new InlineSourcePlugin()
  ]
};

अगर कस्टम सर्वर लॉजिक का इस्तेमाल करके एचटीएमएल जनरेट किया जाता है

Webpack 4 के साथ:

जोड़ें WebpackManifestPlugin रनटाइम समूह का जनरेट किया गया नाम जानने के लिए:
```
// webpack.config.js (for webpack 4)
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  plugins: [
    new ManifestPlugin()
  ]
};
```
इस प्लग इन के साथ बिल्ड करने से फ़ाइल इस तरह दिखेगी:
```
// manifest.json
{
  "runtime~main.js": "runtime~main.8e0d62a03.js"
}
```

रनटाइम समूह के कॉन्टेंट को अपनी सुविधा के हिसाब से इनलाइन करें. उदाहरण के लिए, Node.js और Express के साथ:

// server.js
const fs = require('fs');
const manifest = require('./manifest.json');
const runtimeContent = fs.readFileSync(manifest['runtime~main.js'], 'utf-8');

app.get('/', (req, res) => {
  res.send(`
    …
    <script>${runtimeContent}</script>
    …
  `);
});

या webpack 3 के साथ:

filename तय करके रनटाइम के नाम को स्टैटिक बनाएं:

module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      minChunks: Infinity,
      filename: 'runtime.js'
    })
  ]
};

runtime.js के कॉन्टेंट को आसान तरीके से इनलाइन करें. उदाहरण के लिए, Node.js और Express के साथ:

// server.js
const fs = require('fs');
const runtimeContent = fs.readFileSync('./runtime.js', 'utf-8');

app.get('/', (req, res) => {
  res.send(`
    …
    <script>${runtimeContent}</script>
    …
  `);
});

लेज़ी-लोड कोड, जिसकी आपको अभी ज़रूरत नहीं है

कभी-कभी, किसी पेज के ज़्यादा और कम ज़रूरी हिस्से होते हैं:

अगर YouTube पर कोई वीडियो पेज लोड किया जाता है, तो टिप्पणियां. यहां टिप्पणियों से ज़्यादा ज़रूरी वीडियो को दिखाया गया है.
अगर आप समाचार साइट पर कोई लेख खोलते हैं, तो आप लेख पढ़ें. यहां, विज्ञापनों की तुलना में टेक्स्ट ज़्यादा अहम है.

ऐसे मामलों में, सिर्फ़ सबसे ज़रूरी चीज़ें पहले अपलोड करें और बाकी हिस्सों को बाद में धीरे लोड करें. इसके लिए import() फ़ंक्शन और इसके लिए, code-splitting:

// videoPlayer.js
export function renderVideoPlayer() { … }

// comments.js
export function renderComments() { … }

// index.js
import {renderVideoPlayer} from './videoPlayer';
renderVideoPlayer();

// …Custom event listener
onShowCommentsClick(() => {
  import('./comments').then((comments) => {
    comments.renderComments();
  });
});

import() बताता है कि आपको कोई खास मॉड्यूल डाइनैमिक तौर पर लोड करना है. टास्क कब शुरू होगा Webpack import('./module.js') देखता है. यह इस मॉड्यूल को chunk:

$ webpack
Hash: 39b2a53cb4e73f0dc5b2
Version: webpack 3.8.1
Time: 4273ms
                            Asset     Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./main.f7e53d8e13e9a2745d6d.js    60 kB       1  [emitted]  main
 ./vendor.4f14b6326a80f4752a98.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

और इसे सिर्फ़ तब डाउनलोड करता है, जब एक्ज़ीक्यूशन import() फ़ंक्शन तक पहुंचता है.

इससे main बंडल छोटा हो जाएगा, जिससे लोड होने में लगने वाला समय कम हो जाएगा. और भी ज़्यादा, इससे कैशिंग बेहतर होगी – अगर मुख्य हिस्से में कोड बदला जाता है, टिप्पणियों वाले हिस्से पर कोई असर नहीं पड़ेगा.

ध्यान दें: अगर इस कोड को बेबल के साथ कंपाइल किया जाता है, तो आपको एक सिंटैक्स गड़बड़ी मिलेगी. इसकी वजह यह है कि विज्ञापनों में दिए गए कोड कोबाद में एक्ज़ीक्यूट करने की सुविधा, import() को नहीं समझ पाती. गड़बड़ी से बचने के लिए, syntax-dynamic-import प्लगिन जोड़ें.

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

कोड को रूट और पेजों में बांटें

अगर आपके ऐप्लिकेशन में कई रूट या पेज हैं, लेकिन उसमें सिर्फ़ एक ही JS फ़ाइल है (एक main हिस्सा), इस बात की संभावना है कि आप हर अनुरोध के साथ किया जा सकता है. उदाहरण के लिए, जब कोई उपयोगकर्ता आपकी साइट के होम पेज पर जाता है, तो:

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

अगर हम ऐप्लिकेशन को पेजों में बांटते हैं (या अगर वह एक ही पेज का ऐप्लिकेशन है, तो रूट तय करता है), तो उपयोगकर्ता से सिर्फ़ काम का कोड डाउनलोड होगा. साथ ही, ऐप्लिकेशन कोड को ब्राउज़र कैश मेमोरी में सेव करेगा बेहतर: अगर होम पेज का कोड बदला जाता है, तो Webpack सिर्फ़ संबंधित हिस्सा.

एक पेज वाले ऐप्लिकेशन के लिए

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

"कोड बांटें" react-router के दस्तावेज़ में (React के लिए)
"लेज़ी लोडिंग रास्ते" में vue-router के दस्तावेज़ (Vue.js के लिए)

पारंपरिक कई पेज वाले ऐप्लिकेशन के लिए

परंपरागत ऐप्लिकेशन को पेजों के हिसाब से बांटने के लिए, webpack की एंट्री का इस्तेमाल करें अंक. अगर आपके ऐप्लिकेशन में तीन पेजों के प्रकार: होम पेज, लेख वाला पेज, और उपयोगकर्ता खाता पेज. तीन एंट्री होनी चाहिए:

// webpack.config.js
module.exports = {
  entry: {
    home: './src/Home/index.js',
    article: './src/Article/index.js',
    profile: './src/Profile/index.js'
  }
};

हर एंट्री फ़ाइल के लिए, webpack एक अलग डिपेंडेंसी ट्री बनाएगा और जनरेट करेगा एक बंडल जिसमें सिर्फ़ ऐसे मॉड्यूल शामिल हैं जिनका इस्तेमाल उस एंट्री में होता है:

$ webpack
Hash: 318d7b8490a7382bf23b
Version: webpack 3.8.1
Time: 4273ms
                            Asset     Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./home.91b9ed27366fe7e33d6a.js    18 kB       1  [emitted]  home
./article.87a128755b16ac3294fd.js    32 kB       2  [emitted]  article
./profile.de945dc02685f6166781.js    24 kB       3  [emitted]  profile
 ./vendor.4f14b6326a80f4752a98.js    46 kB       4  [emitted]  vendor
./runtime.318d7b8490a7382bf23b.js  1.45 kB       5  [emitted]  runtime

इसलिए, अगर सिर्फ़ लेख वाले पेज में Lodash, home और profile बंडल का इस्तेमाल किया गया है इसे शामिल नहीं करेगा – और जब उपयोगकर्ता को यह लाइब्रेरी डाउनलोड नहीं करनी होगी, होम पेज पर जाकर.

हालांकि, अलग-अलग डिपेंडेंसी ट्री की अपनी कमियां हैं. अगर दो एंट्री पॉइंट का इस्तेमाल होता है लोडाश का इस्तेमाल किया है और आपने अपनी डिपेंडेंसी को वेंडर बंडल में नहीं ले जाया है, दोनों एंट्री पॉइंट में Lodash की एक कॉपी शामिल होगी. इसे हल करने के लिए, webpack 4 में, आपके Webpack कॉन्फ़िगरेशन में optimization.splitChunks.chunks: 'all' विकल्प:

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

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

या webpack 3 में, CommonsChunkPlugin का इस्तेमाल करें – यह सामान्य डिपेंडेंसी को दी गई नई फ़ाइल में ले जाएगा:

module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2    // 2 is the default value
    })
  ]
};

सबसे बढ़िया वैल्यू पाने के लिए, minChunks की वैल्यू का इस्तेमाल करें. आम तौर पर, आपको इसे छोटा रखना है, लेकिन अगर डेटा के हिस्से बढ़ने पर बढ़ते जाएं, तो इसे बढ़ा दें. इसके लिए उदाहरण के लिए, 3 भाग के लिए, minChunks 2 हो सकता है, लेकिन 30 भाग के लिए, यह 8 हो सकता है – क्योंकि अगर आप इसे 2 पर रखते हैं, तो एक ही फ़ाइल में बहुत सारे मॉड्यूल आ जाएंगे, उसे बहुत ज़्यादा बढ़ा देते हैं.

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

एंट्री के कॉन्सेप्ट के बारे में वेबपैक दस्तावेज़ पॉइंट
Webpack दस्तावेज़ इसके बारे में CommonsChunkPlugin
"वेब पर काम करने वाले CommonsChunkPlugin"
optimization.splitChunks और optimization.runtimeChunk के काम करने का तरीका

मॉड्यूल आईडी को ज़्यादा स्थिर बनाना

कोड बनाते समय, webpack हर मॉड्यूल को एक आईडी असाइन करता है. बाद में, ये आईडी बंडल के अंदर require() में इस्तेमाल किया गया. आम तौर पर, आपको बिल्ड आउटपुट में आईडी दिखते हैं मॉड्यूल पथ के ठीक पहले:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./main.4e50a16675574df6a9e9.js    60 kB       1  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

↓ यहां

[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]
[4] ./comments.js 58 kB {0} [built]
[5] ./ads.js 74 kB {1} [built]
+ 1 hidden module

डिफ़ॉल्ट रूप से, आईडी की गिनती काउंटर का इस्तेमाल करके की जाती है. इसका मतलब है कि पहले मॉड्यूल का आईडी 0 है, दूसरे वाले का आईडी 1 होता है वगैरह). समस्या यह है कि जब किसी एक नया मॉड्यूल है, तो यह मॉड्यूल सूची के बीच में दिखाई दे सकता है, जिससे सभी अगले मॉड्यूल की आईडी:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.5c82c0f337fcb22672b5.js    22 kB       0  [emitted]
   ./main.0c8b617dfc40c2827ae3.js    82 kB       1  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
   [0] ./index.js 29 kB {1} [built]
   [2] (webpack)/buildin/global.js 488 bytes {2} [built]
   [3] (webpack)/buildin/module.js 495 bytes {2} [built]

↓ हमने नया जोड़ा है मॉड्यूल...

[4] ./webPlayer.js 24 kB {1} [built]

↓ और देखें कि वहां क्या हुआ! comments.js के पास अब 4 के बजाय 5 आईडी है

[5] ./comments.js 58 kB {0} [built]

↓ ads.js में अब 5 के बजाय आईडी 6 है

[6] ./ads.js 74 kB {1} [built]
       + 1 hidden module

इससे वे सभी हिस्से अमान्य हो जाते हैं जिनमें बदले हुए आईडी वाले मॉड्यूल शामिल होते हैं या उन पर निर्भर होते हैं – भले ही, उनका असल कोड न बदला हो. हमारे मामले में, 0 वाला डेटा comments.js के साथ) और main डेटा वाला हिस्सा (दूसरे ऐप्लिकेशन कोड के साथ वाला हिस्सा) को अमान्य है – जबकि सिर्फ़ main को ही अमान्य होना चाहिए था.

इसे हल करने के लिए, इसका इस्तेमाल करके मॉड्यूल आईडी को कैलकुलेट करने का तरीका बदलें HashedModuleIdsPlugin. यह काउंटर-आधारित आईडी को मॉड्यूल पाथ के हैश से बदल देता है:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.6168aaac8461862eab7a.js  22.5 kB       0  [emitted]
   ./main.a2e49a279552980e3b91.js    60 kB       1  [emitted]  main
 ./vendor.ff9f7ea865884e6a84c8.js    46 kB       2  [emitted]  vendor
./runtime.25f5d0204e4f77fa57a1.js  1.45 kB       3  [emitted]  runtime

↓ यहां

[3IRH] ./index.js 29 kB {1} [built]
[DuR2] (webpack)/buildin/global.js 488 bytes {2} [built]
[JkW7] (webpack)/buildin/module.js 495 bytes {2} [built]
[LbCc] ./webPlayer.js 24 kB {1} [built]
[lebJ] ./comments.js 58 kB {0} [built]
[02Tr] ./ads.js 74 kB {1} [built]
    + 1 hidden module

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

प्लग इन को चालू करने के लिए, उसे कॉन्फ़िगरेशन के plugins सेक्शन में जोड़ें:

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ]
};

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

Webpack दस्तावेज़ इसके बारे में HashedModuleIdsPlugin

खास जानकारी

बंडल को कैश मेमोरी में सेव करें और बंडल का नाम बदलकर अलग-अलग वर्शन को अलग करें
बंडल को ऐप्लिकेशन कोड, वेंडर कोड, और रनटाइम में बांटें
एचटीटीपी अनुरोध को सेव करने के लिए रनटाइम को इनलाइन करें
import के साथ ग़ैर-ज़रूरी कोड को लेज़ी-लोड करें
गै़र-ज़रूरी चीज़ें लोड होने से रोकने के लिए, कोड को रूट/पेज के हिसाब से बांटें