क्या कोई वेबपैक के कॉमन्सचंकप्लगिन की व्याख्या कर सकता है

Question

मुझे सामान्य जानकारी मिलती है कि CommonsChunkPluginसभी प्रवेश बिंदुओं को देखता है, यह देखने के लिए जाँच करता है कि क्या उनके बीच सामान्य पैकेज / निर्भरताएं हैं और उन्हें अपने बंडल में अलग करता है।

तो, मान लें कि मेरे पास निम्नलिखित कॉन्फ़िगरेशन है:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

अगर मैं उपयोग किए बिना बंडल करता हूं CommonsChunkPlugin

मैं 3 नई बंडल फ़ाइलों को समाप्त करूंगा:

• entry1.bundle.jsजिसमें से पूरा कोड होता है entry1.jsऔर jqueryऔर अपने स्वयं के क्रम में शामिल है
• entry2.bundle.jsजिसमें से पूरा कोड होता है entry2.jsऔर jqueryऔर अपने स्वयं के क्रम में शामिल है
• vendors.bundle.jsजिसमें से पूरा कोड होता है jqueryऔर some_jquery_pluginऔर अपने स्वयं के क्रम में शामिल है

यह स्पष्ट रूप से बुरा है क्योंकि मैं संभावित रूप jqueryसे पृष्ठ में 3 बार लोड करूंगा , इसलिए हम ऐसा नहीं चाहते हैं।

अगर मैं बंडल का उपयोग कर रहा हूं CommonsChunkPlugin

इस बात पर निर्भर करता है कि मैं CommonsChunkPluginनिम्नलिखित में से किस तर्क से गुजरता हूं :

• मामले 1: यदि मैं पास हो जाता { name : 'commons' }हूं तो मैं निम्नलिखित बंडल फाइलों के साथ समाप्त हो जाऊंगा:

  • entry1.bundle.jsजिसमें से पूरा कोड होता है entry1.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • entry2.bundle.jsजिसमें से पूरा कोड होता है entry2.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • vendors.bundle.jsजिसमें से पूरा कोड होता है some_jquery_plugin, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • commons.bundle.jsजिसमें पूरा कोड होता है jqueryऔर जिसमें रनटाइम होता है

  इस तरह हम कुल मिलाकर कुछ छोटे बंडलों के साथ समाप्त होते हैं और रनटाइम commonsबंडल में निहित होता है। सुंदर ठीक है लेकिन आदर्श नहीं है।

• मामले 2: यदि मैं पास हो जाता { name : 'vendors' }हूं तो मैं निम्नलिखित बंडल फाइलों के साथ समाप्त हो जाऊंगा:

  • entry1.bundle.jsजिसमें से पूरा कोड होता है entry1.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • entry2.bundle.jsजिसमें से पूरा कोड होता है entry2.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • vendors.bundle.jsजिसमें से पूरा कोड होता है jqueryऔर some_jquery_pluginऔर क्रम होता है।

  इस तरह, फिर से, हम समग्र रूप से कुछ छोटे बंडलों के साथ समाप्त होते हैं, लेकिन रनटाइम अब vendorsबंडल में निहित है । यह पिछले मामले की तुलना में थोड़ा खराब है, क्योंकि रनटाइम अब vendorsबंडल में है।

• मामले 3: यदि मैं पास हो जाता { names : ['vendors', 'manifest'] }हूं तो मैं निम्नलिखित बंडल फाइलों के साथ समाप्त हो जाऊंगा:

  • entry1.bundle.jsजिसमें से पूरा कोड होता है entry1.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • entry2.bundle.jsजिसमें से पूरा कोड होता है entry2.js, जिसके लिए एक आवश्यकता होती है jqueryऔर जिसमें रनटाइम नहीं होता है
  • vendors.bundle.jsजिसमें से पूर्ण कोड होता है jqueryऔर some_jquery_pluginजिसमें रनटाइम नहीं होता है
  • manifest.bundle.js जिसमें हर दूसरे बंडल के लिए आवश्यकताएं होती हैं और रनटाइम होता है

  इस तरह हम कुल मिलाकर कुछ छोटे बंडलों के साथ समाप्त होते हैं और रनटाइम manifestबंडल में समाहित होता है। यह आदर्श मामला है।

जो मुझे समझ में नहीं आता / मुझे यकीन नहीं है कि मैं समझ रहा हूं

• में मामला 2 कारण है कि हम अंत था vendorsदोनों आम कोड (युक्त बंडल jquery) और जो कुछ भी से बनी vendorsप्रविष्टि ( some_jquery_plugin)? मेरी समझ से, CommonsChunkPluginयहाँ जो किया गया वह यह था कि यह कॉमन कोड ( jquery) इकट्ठा था , और जब से हमने इसे vendorsबंडल में आउटपुट करने के लिए मजबूर किया , तो इसने कॉमन कोड को vendorsबंडल में "मर्ज" कर दिया (जिसमें अब केवल कोड शामिल था। some_jquery_plugin)। कृपया पुष्टि करें या व्याख्या करें।

• में मामला 3 मुझे समझ नहीं आता कि क्या हुआ जब हम पारित कर दिया { names : ['vendors', 'manifest'] }प्लगइन करने के लिए। क्यों / कैसे vendorsबंडल को बरकरार रखा गया था, जिसमें दोनों शामिल हैं , jqueryऔर some_jquery_pluginजब jqueryस्पष्ट रूप से एक सामान्य निर्भरता है, और उत्पन्न manifest.bundle.jsफ़ाइल को जिस तरह से बनाया गया था (अन्य सभी बंडलों की आवश्यकता और रनटाइम युक्त) क्यों बनाया गया था?

Comments

केस 1 के लिए, मुझे लगता है कि आपको मिनचर्स प्रॉपर्टी को निर्दिष्ट करना चाहिए।

— मार्को

मैंने आपके प्रश्न से बहुत कुछ सीखा है , बहुत बहुत धन्यवाद!

— राफेल Eyng

यह पूछने के लिए बहुत बहुत धन्यवाद और इस प्लगइन पर मेरे सारे भ्रम को दूर करने के लिए enn

— ग्लेन मोहम्मद

शायद किसी को पता है, वेबपैक 4 में ये उदाहरण कैसा लगेगा?

— स्टालअलेक्स

Answer 1

इस तरह CommonsChunkPluginकाम करता है।

एक आम हिस्सा कई एंट्री चंक्स द्वारा साझा किए गए मॉड्यूल "रिसीव" करता है। एक जटिल कॉन्फ़िगरेशन का एक अच्छा उदाहरण वेबपैक रिपॉजिटरी में पाया जा सकता है ।

CommonsChunkPlugin, Webpack के अनुकूलन चरण, जिसका अर्थ है कि यह स्मृति में चल रही है के दौरान चलाने के बस से पहले मात्रा सील और डिस्क के लिए लिखा जाता है।

जब कई सामान्य विराम को परिभाषित किया जाता है, तो उन्हें क्रम में संसाधित किया जाता है। आपके मामले में 3, यह प्लगइन को दो बार चलाने जैसा है। लेकिन कृपया ध्यान दें कि CommonsChunkPluginएक अधिक जटिल कॉन्फ़िगरेशन (minSize, minChunks, आदि) हो सकता है जो मॉड्यूल को स्थानांतरित करने के तरीके को प्रभावित करता है।

मामला एक:

1. इसमें 3 रहे हैं entryहिस्सा ( entry1, entry2और vendors)।
2. कॉन्फ़िगरेशन commonsचंक को एक सामान्य चंक के रूप में सेट करता है ।
3. प्लगइन commonsकॉमन चंक को प्रोसेस करता है (क्योंकि चंक मौजूद नहीं है, इसे बनाया गया है):
   1. : यह मॉड्यूल है कि अन्य मात्रा में एक बार से अधिक उपयोग किया जाता है एकत्र करता है entry1, entry2और vendorsउपयोग jqueryतो मॉड्यूल इन टुकड़ों से निकाल दिया जाता है और में जोड़ा जाता है commonsहिस्सा।
   2. commonsहिस्सा एक के रूप में चिह्नित किया गया है entryहिस्सा है, जबकि entry1, entry2और vendorsमात्रा के रूप में जिनमें फ्लैग नहीं किए जाते हैं entry।
4. अंत में, चूंकि commonsचंक एक entryहिस्सा है, इसमें रनटाइम और jqueryमॉड्यूल शामिल हैं।

मामला 2:

1. इसमें 3 रहे हैं entryहिस्सा ( entry1, entry2और vendors)।
2. कॉन्फ़िगरेशन vendorsचंक को एक सामान्य चंक के रूप में सेट करता है ।
3. प्लगइन vendorsआम चंक्स को प्रोसेस करता है :
   1. यह मॉड्यूल है कि अन्य मात्रा में एक बार से अधिक उपयोग किया जाता है एकत्र करता है: entry1और entry2उपयोग jqueryतो मॉड्यूल इन मात्रा (ध्यान दें कि यह करने के लिए नहीं जोड़ा जाता है से निकाल दिया जाता vendorsहिस्सा क्योंकि vendorsहिस्सा पहले से ही शामिल हैं)।
   2. vendorsहिस्सा एक के रूप में चिह्नित किया गया है entryहिस्सा है, जबकि entry1और entry2मात्रा के रूप में जिनमें फ्लैग नहीं किए जाते हैं entry।
4. अंत में, चूंकि vendorsचंक एक entryचंक है, इसमें रनटाइम और jquery/ jquery_pluginमॉड्यूल शामिल हैं।

मामला 3:

1. इसमें 3 रहे हैं entryहिस्सा ( entry1, entry2और vendors)।
2. कॉन्फ़िगरेशन vendorsचंक और manifestचंक को सामान्य विखंडू के रूप में सेट करता है।
3. प्लगइन manifestचंक बनाता है क्योंकि यह मौजूद नहीं है।
4. प्लगइन vendorsआम चंक्स को प्रोसेस करता है :
   1. यह मॉड्यूल है कि अन्य मात्रा में एक बार से अधिक उपयोग किया जाता है एकत्र करता है: entry1और entry2उपयोग jqueryतो मॉड्यूल इन मात्रा (ध्यान दें कि यह करने के लिए नहीं जोड़ा जाता है से निकाल दिया जाता vendorsहिस्सा क्योंकि vendorsहिस्सा पहले से ही शामिल हैं)।
   2. vendorsहिस्सा एक के रूप में चिह्नित किया गया है entryहिस्सा है, जबकि entry1और entry2मात्रा के रूप में जिनमें फ्लैग नहीं किए जाते हैं entry।
5. प्लगइन manifestकॉमन चंक को प्रोसेस करता है (क्योंकि चंक मौजूद नहीं है, इसे बनाया गया है):
   1. यह उन मॉड्यूल्स को इकट्ठा करता है जो एक बार से अधिक दूसरे चंक्स में उपयोग किए जाते हैं: जैसे कि एक बार में एक से अधिक बार उपयोग किए जाने वाले मॉड्यूल नहीं होते हैं, कोई भी मॉड्यूल स्थानांतरित नहीं होता है।
   2. manifestहिस्सा के रूप में चिह्नित किया गया है entryहिस्सा है, जबकि entry1, entry2और vendorsके रूप में जिनमें फ्लैग नहीं किए जाते हैं entry।
6. अंत में, manifestचंक एक entryहिस्सा है क्योंकि इसमें रनटाइम होता है।

आशा है कि इससे सहायता मिलेगी।

Comments

कुछ चीजें जो मैं पूछना / स्पष्ट करना चाहता हूं, कृपया इन बिंदुओं को अपने उत्तर में भी जोड़ें: 1) क्या आप केवल CASE 1 के लिए चरण स्पष्टीकरण द्वारा एक ही चरण कर सकते हैं ताकि उत्तर 1000% पूरा हो जाए? 2) प्लगइन को { names : ['vendors', 'manifest'] }चलाना दो बार चलाने के साथ है, एक बार साथ { name : 'vendors' }और एक बार { name : 'manifest' }सही? 3) जब हम कहते हैं कि "प्लगइन एक आम चंक को संसाधित करता है" तो हमारा मतलब है कि यह सामग्री को bundle.jsफ़ाइल में थूक देगा , स्मृति में, सही? 4) जब तक यह "सभी सामान्य विखंडू को संसाधित नहीं करता है" तब तक यह किसी फाइल के लिए कोई आउटपुट नहीं

— लिखता है

मेरे पास एक और सवाल है, अगर आपको जवाब देने का मन है। मान लीजिए कि ऊपर से मेरे उदाहरण में, entry1.jsऔर entry2.jsउनके बीच एक और सामान्य फ़ाइल थी, jqueryफ़ाइल के अलावा, चलो इसे कॉल करते हैं ownLib.js। CASE 2 और CASE 3 ownLib.jsमें, vendors.bundle.jsसही में समाप्त होगा ? आप इसे कैसे बनायेंगे ताकि वेंडर फाइलों के अलावा अन्य आम फाइलें अपने खुद के चंक में अलग हो जाएं, vendorsचंक के अलावा ? आपको परेशान करने के लिए क्षमा करें, लेकिन मैं अभी भी सीख रहा हूं कि वेबपैक का उपयोग कैसे किया जाता है

— दिमित्रीस करागियानिस

हां यह सही है: ownLib.jsपहले आम चैंक में रखा जाएगा। यदि आप किसी अन्य chunck में आम निर्भरता एकत्र करना चाहते हैं, तो आप कुछ इस तरह से पारित करने के लिए है: { names : ['common', 'vendors', 'manifest'] }।

— लॉरेंट इटिम्बे

बढ़िया सवाल, बढ़िया जवाब, बढ़िया चर्चा। लगता है जैसे मैं इसे अंत में प्राप्त करता हूं।

— ओलुकिमन

मैंने CommonsChunkPlugin डॉक्स पढ़ने के अंतिम दिन बिताए हैं और यह पहला स्थान है जिसे मैंने पढ़ा है, जिसे निष्पादित करने के बाद, संसाधित विखंडू "प्रविष्टि के रूप में अप्रभावित हैं"। यह मूल रूप से सब कुछ समझाता है जो मुझे परेशान कर रहा था - अगर मैं एक से अधिक बार उत्थान कर सकता हूं, तो मैं करूंगा।

— कोडर सेप