प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

अवलोकनम्

• पूर्वलेखे Webpack: Dependency Graph मॉड्यूल् मध्ये निर्भरतां प्रबन्धयति , वयं विस्तरेण व्याख्यातवन्तः यत् कथं "build" चरणः Entry तः आरभ्य क्रमेण पुनरावर्तनीयरूपेण मॉड्यूल् सामग्रीं पठति, विश्लेषणं च करोति, अन्ते च module dependency graph - ModuleGraph ऑब्जेक्ट् - निर्माति अस्मिन् लेखे वयं अग्रिमे "encapsulation" चरणे ModuleGraph सामग्रीयाः आधारेण Chunks कथं व्यवस्थितं कर्तव्यमिति व्याख्यानं निरन्तरं कुर्मः, तथा च ChunkGroup तथा ChunkGraph निर्भरतावस्तूनाम् मुख्यप्रक्रियायाः अग्रे निर्माणं कुर्मः

मुख्यप्रक्रियायाः अतिरिक्तं वयं अनेकाः अस्पष्टाः अवधारणाः अपि विस्तरेण व्याख्यास्यामः-

• Chunk, ChunkGroup, ChunGraph इति वस्तुनि कानि सन्ति? तयोः मध्ये कीदृशः अन्तरक्रिया अस्ति ?
• Webpack इत्यस्य पूर्वनिर्धारितं उप-पैकेजिंग् नियमाः, नियमेषु च समस्याः ।

ChunkGraph निर्माण प्रक्रिया

पुरतः Init、Make、सील"In ", वयं प्रवर्तयामः यत् Webpack इत्यस्य अन्तर्निहितं निर्माणतर्कं मोटेन विभक्तुं शक्यते: "प्रारम्भ, निर्माण, पैकेजिंग"त्रयः चरणाः : १.

इत्यस्मिन्‌,"निर्माणं कुरुत"मॉड्यूलानां मध्ये आश्रयाणां विश्लेषणं कृत्वा स्थापनं च चरणस्य उत्तरदायी भवति निर्भरता आलेखः(ModuleGraph ततः, " इत्यत्र);कैप्सूलीकरणम्” चरणे, निर्भरतालेखस्य आधारेण, मॉड्यूल्स् पृथक् पृथक् अनेक Chunk वस्तुषु समाहिताः भवन्ति, तथा च Chunks मध्ये मातापितृ-बालनिर्भरतासम्बन्धाः ChunkGraph तथा अनेक ChunkGroup वस्तुषु क्रमबद्धाः भवन्ति

"encapsulation" चरणस्य महत्त्वपूर्णं लक्ष्यं "build" चरणे एकत्रितस्य ModuleGraph सम्बन्धग्राफस्य आधारेण ChunkGraph सम्बन्धग्राफस्य निर्माणं भवति अस्याः प्रक्रियायाः तर्कः तुल्यकालिकरूपेण जटिलः अस्ति

अत्र कतिपयानां महत्त्वपूर्णानां सोपानानां कार्यान्वयनतर्कस्य संक्षेपेण विश्लेषणं कुर्मः ।

प्रथमं सोपानम् अतीव महत्त्वपूर्णम् अस्ति : १. स्थानांतरणseal() कार्यस्य अनन्तरं व्याप्तुम्entry विन्यासः, प्रत्येकं प्रविष्टेः कृते रिक्तं रचयन्तुChunk तथाप्रवेशबिन्दुः वस्तु (विशेषःChunkGroup), प्रारम्भे मूलभूतं च स्थापयति ChunkGraph संरचनात्मकः सम्बन्धः, अग्रिमपदस्य सज्जतां कुर्वन्तु, कीलसङ्केतः : १.

class Compilation {
  seal(callback) {
    // ...
    const chunkGraphInit = new Map();
    // 遍历入口模块列表
    for (const [name, { dependencies, includeDependencies, options }] of this
      .entries) {
      // 为每一个 entry 创建对应的 Chunk 对象
      const chunk = this.addChunk(name);
      // 为每一个 entry 创建对应的 ChunkGroup 对象
      const entrypoint = new Entrypoint(options);
      // 关联 Chunk 与 ChunkGroup
      connectChunkGroupAndChunk(entrypoint, chunk);

      // 遍历 entry Dependency 列表
      for (const dep of [...this.globalEntry.dependencies, ...dependencies]) {
        // 为每一个 EntryPoint 关联入口依赖对象，以便下一步从入口依赖开始遍历其它模块
        entrypoint.addOrigin(null, { name }, /** @type {any} */ (dep).request);

        const module = this.moduleGraph.getModule(dep);
        if (module) {
          // 在 ChunkGraph 中记录入口模块与 Chunk 关系
          chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint);
          // ...
        }
      }
    }
    // 调用 buildChunkGraph 方法，开始构建 ChunkGraph
    buildChunkGraph(this, chunkGraphInit);
    // 触发各种优化钩子
    // ...
  }
}

निष्पादनस्य समाप्तेः अनन्तरं निम्नलिखितदत्तांशसंरचना निर्मीयते ।

द्वितीयं, यदि अस्मिन् समये विन्यस्तं भवति entry.runtime, Webpack इत्यनेन अस्मिन् स्तरे रनटाइम् कोड् अपि प्रदास्यति निर्मियताम् तदनुरूपः चङ्कः प्रत्यक्षतया चवितरन्ति देहिentry तदनुरूपःChunkGroup वस्तु।यदा सर्वं सज्जं भवति तदा आहूतम्buildChunkGraph इति function, अग्रिमपदं गच्छन्तु ।

द्वितीयः चरणः : १. अस्तिbuildChunkGraph कार्यस्य अन्तःस्थानांतरण visitModules फंक्शन्, ModuleGraph इत्यस्य भ्रमणं कृत्वा सर्वाणि Modules इत्येतत् तेषां निर्भरतानुसारं भिन्न-भिन्न-मॉड्यूल्-मध्ये नियुक्तं कुर्वन्तु ।Chunk वस्तु; यदि अस्मिन् प्रक्रियायां सम्मुखीभवतिasync मॉड्यूल, ततः मॉड्यूल् निर्मियताम्नूतनम्‌ ChunkGroup तथाChunk वस्तु, अन्ततः निम्नलिखितदत्तांशसंरचनायाः निर्माणं करोति:

तृतीयः सोपानः : १. अस्तिbuildChunkGraph कार्येस्थानांतरण connectChunkGroups विधिः, स्थापयतिChunkGroup मध्ये,Chunk परस्परं मध्ये आश्रयाः पूर्णं जनयितुंChunkGraph वस्तु, अन्ततः निम्नलिखितदत्तांशसंरचनायाः निर्माणं करोति:

चतुर्थं सोपानम् : १. अस्तिbuildChunkGraph कार्येस्थानांतरण cleanupUnconnectedGroups विधिः, स्वच्छता असिद्धा अस्तिChunkGroup, मुख्यतया कार्यप्रदर्शनस्य अनुकूलने भूमिकां निर्वहति ।

एतानि चत्वारि पदानि गत्वा उपरितः अधः यावत् ।ModuleGraph इत्यस्मिन् संगृहीताः मॉड्यूल् त्रयः भिन्नाः Chunk ऑब्जेक्ट्स् इत्यत्र नियुक्ताः भविष्यन्ति: Entry, Async, Runtime च मॉड्यूलस्य प्रकृतेः अनुसारं, तथा च Chunks मध्ये निर्भरताः ChunkGraph तथा ChunkGroup संग्रहेषु संगृहीताः भविष्यन्ति भवान् एतेषां ऑब्जेक्ट् इत्यस्य आधारेण निरन्तरं कर्तुं शक्नोति पश्चात् उपठेकेदारी नीतयः परिवर्तयन्तु (उदा.SplitChunksPlugin), Module तथा Chunk वस्तुनां स्वामित्वं पुनर्गठनं आवंटनं च कृत्वा उपठेकेदारी अनुकूलनं साकारं कुर्वन्ति ।

चंक बनाम चंकग्रुप बनाम चंकग्राफ

उपर्युक्तनिर्माणप्रक्रियायां त्रीणि प्रमुखवस्तूनि सन्ति: Chunk, ChunkGroup, ChunkGraph च प्रथमं तेषां अवधारणानां कार्याणां च सारांशं कृत्वा अस्माकं अवगमनं गभीरं कुर्मः ।

• Chunk: मॉड्यूलस्य उपयोगः मॉड्यूलस्य सामग्रीं पठितुं, अन्तर-मॉड्यूल-निर्भरतां अभिलेखयितुं इत्यादिषु भवति, यदा तु Chunk मॉड्यूल-निर्भरतायाः आधारेण बहुविध-मॉड्यूल-विलयनं करोति, तान् सम्पत्ति-सञ्चिकासु च निर्गच्छति (उत्पादानाम् विलयस्य, आउटपुट्-करणस्य च तर्कः अग्रिमे अध्याये व्याख्यातः भविष्यति):

• ChunkGroup:एकम्‌ ChunkGroup एकं वा अधिकं वा समाविष्टम् अस्तिChunk वस्तु;ChunkGroup तथाChunkGroup मातापितृ-सन्तति-आश्रयसम्बन्धः निम्नलिखितयोः मध्ये निर्मीयते : १.

• ChunkGraph: अन्ते Webpack Chunks तथा ChunkGroups इत्येतयोः मध्ये निर्भरतां संग्रहयिष्यति compilation.chunkGraph वस्तुनि निम्नलिखितप्रकारसम्बन्धाः निर्मीयन्ते ।
  

पूर्वनिर्धारित उपठेकेदारी नियम

उपर्युक्तम् ChunkGraph निर्माणप्रक्रिया अन्ततः Module इत्यस्य आयोजनं त्रयः भिन्नप्रकारस्य Chunks इत्यत्र करिष्यति:

• प्रवेशः चङ्कः : समानः entry निम्नस्पर्शेन प्राप्ताः मॉड्यूलाः एकस्मिन् Chunk इत्यत्र संगठिताः भवन्ति;
• Async Chunk: अतुल्यकालिकं मॉड्यूल् पृथक् पृथक् Chunk इत्यत्र संगठितं भवति;
• रनटाइम चंक: .entry.runtime यदा रिक्तं न भवति तदा रनटाइम् मॉड्यूल् Chunk इत्यत्र व्यवस्थितं भविष्यति ।

इदं Webpack मध्ये अन्तः निर्मितम् अस्ति, यदि न प्रयुक्तम् splitChunks अन्येषां प्लग-इन्-सन्दर्भे, मॉड्यूल-इनपुट्-तः आउटपुट्-मध्ये मैपिंग-करणाय पूर्वनिर्धारित-नियमाः Webpack-इत्यस्य प्रमुख-अन्तर्निहित-सिद्धान्तेषु अन्यतमाः सन्ति, अतः प्रत्येकस्य Chunk-इत्यस्य विशिष्ट-नियमानाम् परिचयः आवश्यकः

प्रविष्टि खण्डः : १.

Entry Chunk इत्यस्मात् आरभ्य प्रथमं Webpack भविष्यति entry निर्मियताम्Chunk वस्तु, उदाहरणार्थं, निम्नलिखितविन्यासः ।

module.exports = {
  entry: {
    main: "./src/main",
    home: "./src/home",
  }
};

ट्रैवर्स entry वस्तुगुणान् सृजति चchunk[main] 、chunk[home] द्वे वस्तु, अस्मिन् समये द्वौ Chunks क्रमशः समाविष्टौmain 、home मॉड्यूलः : १.

आरम्भीकरणस्य समाप्तेः अनन्तरं Webpack भविष्यति ModuleGraph आश्रयदत्तांशः, भविष्यतिentry निम्नलिखितद्वारा स्पृष्टाः सर्वे मॉड्यूलाः Chunk (इत्यत्र घटमानाः) मध्ये पूरिताः भवन्तिvisitModules इति method), उदाहरणार्थं, निम्नलिखितसञ्चिकानिर्भरतायाः कृते:

main.js यदि चत्वारि सञ्चिकाः a/b/c/d प्रत्यक्षतया परोक्षतया वा समकालिकरूपेण सन्दर्भिताः सन्ति तर्हि Webpack प्रथमं भविष्यतिmain.js मॉड्यूल् Chunk तथा EntryPoint ऑब्जेक्ट्स् निर्माति, ततः क्रमेण a/b/c/d मॉड्यूल् योजयतिchunk[main] , अन्ततः गठन : १.

Async Chunk: 1.1.

द्वितीयं, Webpack प्रत्येकं अतुल्यकालिकं आयातकथनं (import(xxx) तथाrequire.ensure ) पृथक् Chunk ऑब्जेक्ट् इत्यस्य रूपेण संसाधितं भवति, तस्य सर्वे उपमॉड्यूल्स् अस्मिन् Chunk मध्ये योजिताः भवन्ति - वयं तत् Async Chunk इति वदामः । यथा, निम्नलिखित-उदाहरणार्थम् ।

// index.js
import './sync-a.js'
import './sync-b.js'

import('./async-a.js')

// async-a.js
import './sync-c.js'

प्रविष्टिमॉड्यूले index.js In, sync-a तथा sync-b इत्येतयोः परिचयः समकालिकरूपेण भवति;sync-c module, निम्नलिखितमॉड्यूलनिर्भरताचित्रं निर्माय:

अस्मिन् क्षणे Webpack इति प्रवेशबिन्दुः भविष्यति index.js, अतुल्यकालिक मॉड्यूल async-a.js निम्नलिखित Chunk संरचनां निर्मातुं पृथक् उपसंकुलं रचयन्तु:

तथा chunk[index] तथाchunk[async-a] तेषां मध्ये एकदिशा आश्रयः निर्मितः भवति, Webpack च एतत् आश्रयं रक्षिष्यतिChunkGroup._parents 、ChunkGroup._children गुणेषु ।

रनटाइम चंक: .

अन्ते व्यतिरिक्तम् entry , अतुल्यकालिकमॉड्यूलस्य अतिरिक्तं, Webpack5 Chunks इत्यत्र पृथक् रनटाइम् कोड् निष्कासयितुं अपि समर्थयति । अत्र उल्लिखितः रनटाइम् कोडः Webpack द्वारा इन्जेक्शन् कृतानां मूलभूतरूपरेखासङ्केतानां श्रृङ्खलां निर्दिशति यत् सुनिश्चितं करोति यत् पैकेज्ड् उत्पादः सामान्यतया चालयितुं शक्नोति उदाहरणार्थं, सामान्यं Webpack पैकेज्ड् उत्पादसंरचना निम्नलिखितरूपेण अस्ति

उपरिष्टाद् चित्रे रक्तपेटिकायां वृत्तः कोडस्य विशालः खण्डः Webpack द्वारा गतिशीलरूपेण उत्पन्नः रनटाइम् कोडः अस्ति संकलनकाले Webpack व्यावसायिकसङ्केतस्य आधारेण (आधारितं) कोऽपि रनटाइम् कोड् आउटपुट् कर्तव्यः इति निर्णयं करिष्यतिDependency उपवर्गः), यथा- १.

• आवश्यकता __webpack_require__.f、__webpack_require__.r तथा न्यूनतममॉड्यूलरसमर्थनं प्राप्तुं अन्यकार्यं;
• यदि भवान् गतिशीलभारविशेषतां उपयुङ्क्ते तर्हि भवता लेखितव्यम् __webpack_require__.e नियोग;
• यदि भवान् Module Federation इति सुविधां उपयुङ्क्ते तर्हि लिखितव्यम् __webpack_require__.o नियोग;
• इत्यादि।

यद्यपि रनटाइम् कोड् इत्यस्य प्रत्येकं भागः लघुः भवितुम् अर्हति, तथापि यथा यथा विशेषताः वर्धन्ते तथा तथा अन्तिमः परिणामः बृहत्तरः बृहत्तरः भविष्यति विशेषतः बहु-प्रविष्टि-अनुप्रयोगानाम् कृते, प्रत्येकं प्रविष्टौ समानं रनटाइम् पुनः पुनः संकुलं कर्तुं किञ्चित् अपव्ययः भवति entry.runtime रनटाइम् कोड् कथं संकुलितः इति घोषयितुं विन्यासवस्तूनि उपयुज्यन्ते ।उपयोगाय केवलं उपयोगं कुर्वन्तुentry मदं मध्ये स्ट्रिंग् रूपं योजयन्तुruntime मूल्यं यथा - १.

module.exports = {
  entry: {
    index: { import: "./src/index", runtime: "solid-runtime" },
  }
};

अस्ति compilation.seal फंक्शन् मध्ये Webpack प्रथमं अस्तिentry निर्मियताम्EntryPoint, ततः न्यायाधीशः entry किं विन्यासः समाविष्टः अस्तिruntime गुणाः यदि सन्ति तर्हि तान् सह सृजतुruntime मूल्यं Chunk इत्यस्य नाम अस्ति अतः उपरिष्टाद् उदाहरणविन्यासः द्वौ Chunks जनयिष्यति ।chunk[index.js] 、chunk[solid-runtime], अस्य आधारेण च अन्ते द्वौ सञ्चिकाः निर्गम्यन्ते:

• प्रवेशसूचकाङ्कस्य अनुरूपम् index.js प्रलेख;
• तदनुरूपं रनटाइम् विन्यासः solid-runtime.js प्रलेख।

अनेकेषु entry परिदृश्ये केवलं प्रत्येकस्य कृतेentry सर्वे समानरूपेण सेट् कुर्वन्तिruntime मूल्यं कृत्वा, Webpack runtime कोडः विलीनः भविष्यति तथा च तस्मिन् एव Runtime Chunk मध्ये लिखितः भविष्यति, अन्ततः उत्पादस्य कार्यप्रदर्शनस्य अनुकूलनं प्राप्तुं शक्नोति । यथा, निम्नलिखितविन्यासस्य कृते :

module.exports = {
  entry: {
    index: { import: "./src/index", runtime: "solid-runtime" },
    home: { import: "./src/home", runtime: "solid-runtime" },
  }
};

प्रवेश index、home समानं भागं कुर्वन्तिruntime मूल्यं, अन्ते च क्रमशः त्रीणि Chunks जनयन्ति:

अस्मिन् समये प्रवेशः chunk[index]、chunk[home] रनटाइम् इत्यनेन सहchunk[solid-runtime] मातापितृ-सन्तति-आश्रयसम्बन्धः अपि निर्मितः भविष्यति ।

उपठेकेदारीनियमैः सह मुद्देः

पूर्वनिर्धारित-उप-पैकेजिंग-नियमानां सर्वाधिकं समस्या अस्ति यत् एतत् मॉड्यूल्-द्वैधीकरणस्य समाधानं कर्तुं न शक्नोति यदि एकस्मिन् समये अनेक-चङ्क्-मध्ये एकमेव मॉड्यूल् भवति, तर्हि एतत् मॉड्यूल्-इत्येतत् एतेषु चङ्क्-मध्ये प्रतिबन्धं विना पुनः पुनः संकुलं भविष्यति यथा, मानातु अस्माकं द्वौ प्रविष्टौ main/index स्तः यत् उभयम् अपि एकस्मिन् मॉड्यूल् इत्यस्य उपरि निर्भरं भवति:

पूर्वनिर्धारितरूपेण, Webpack अस्मिन् अतिरिक्तप्रक्रियाकरणं न करिष्यति, अपितु केवलं c मॉड्यूल् एकस्मिन् समये मुख्य/सूचकाङ्कद्वये Chunks मध्ये संकुलयति, अन्ततः एतत् निर्माति:

द्रष्टुं शक्यते chunk परस्परं पृथक् भवन्ति, मॉड्यूल c पुनः पुनः संकुलं भवति, यत् अन्तिम-उत्पादस्य अनावश्यक-प्रदर्शन-हानिम् उत्पन्नं कर्तुं शक्नोति!

एतस्याः समस्यायाः समाधानार्थं Webpack 3 इति प्रवर्तनं कृतम् CommonChunkPlugin प्लगिन् पृथक् पृथक् प्रविष्टीनां मध्ये सामान्याश्रयान् निष्कासयितुं प्रयततेchunk,किन्तु CommonChunkPlugin अनिवार्यतया चङ्क्स् मध्ये सरलस्य मातापितृ-बाल-सम्बन्धशृङ्खलायाः आधारेण कार्यान्वितं भवति यत् निष्कर्षितस्य तृतीय-सङ्कुलस्य उपयोगः यथा भवति इति अनुमानं कर्तुं कठिनम्entry पिताchunk अद्यापि बालकः एवchunk，CommonChunkPlugin मातापितृरूपेण एकीकृतप्रक्रियाकरणम्chunk, केषुचित् सन्दर्भेषु तस्य कार्यप्रदर्शने पर्याप्तः नकारात्मकः प्रभावः भवति ।

अस्य कारणात् अधिकजटिलदत्तांशसंरचनाः विशेषतया Webpack 4—— 2019 इत्यस्य अनन्तरं प्रवर्तन्ते स्म । ChunkGroup सम्बन्धशृङ्खलाप्रबन्धनस्य सहकार्यस्य च साकारीकरणे विशेषज्ञःSplitChunksPlugin अधिककुशलतया बुद्धिपूर्वकं च कार्यान्वितुं शक्यतेअनुमानात्मक उपठेकेदारी।

सारांशं कुरुत

सारांशेन, "Build" चरणः मॉड्यूलस्य सन्दर्भसम्बन्धस्य आधारेण ModuleGraph इत्यस्य निर्माणार्थं उत्तरदायी भवति "Encapsulation" चरणः ModuleGraph इत्यस्य आधारेण Chunk वस्तुनां श्रृङ्खलां निर्मातुं तथा च Chunks (asynchronous references, runtime) मध्ये निर्भरतां व्यवस्थितं कर्तुं उत्तरदायी भवति; ) into ChunkGraph - Chunk Dependency graph object इति । ModuleGraph इत्यस्य सदृशं ChunkGraph संरचनायाः परिचयः Chunks मध्ये निर्भरतायाः प्रबन्धनतर्कस्य अपि वियुग्मनं कर्तुं शक्नोति, येन समग्रं वास्तुकला तर्कं अधिकं उचितं विस्तारं च सुलभं भवति

तथापि, यद्यपि अतीव जटिलं दृश्यते तथापि "पैकेजिंग्"-चरणस्य महत्त्वपूर्णं लक्ष्यं अद्यापि निर्धारयितुं भवति यत् कति चङ्क्स् सन्ति तथा च प्रत्येकस्मिन् चङ्क् मध्ये के के मॉड्यूल्स् समाविष्टाः सन्ति - एते एव प्रमुखाः कारकाः सन्ति ये वास्तवतः अन्तिमपैकेजिंग् परिणामं प्रभावितयन्ति

अस्य कृते अस्माकं Webpack5 इत्यस्य त्रयः अन्तर्निहिताः उपठेकेदारीनियमाः अवगन्तुं आवश्यकाः सन्ति: Entry Chunk, Async Chunk तथा Runtime Chunk एते सर्वाधिकं मौलिकाः उपठेकेदारी तर्काः (यथा splitChunksPlugin इति) सर्वे अस्य आधारेण भवन्ति, इत्यस्य साहाय्येन buildChunkGraph पश्चात् प्रेरिताः विविधाः हुकाः विस्तारितं उपठेकेदारीप्रभावं प्राप्तुं चङ्कसंरचनायाः अधिकं विभाजनं, विलयनं, अनुकूलनं च कुर्वन्ति ।

चिन्तयतु Chunk किं च केवलं एकः उत्पादसञ्चिका उत्पादिता भविष्यति? किमर्थम्‌?mini-css-extract-plugin、file-loader अतिरिक्तसञ्चिकाः लिखितुं शक्नोति इति एषः प्रकारः घटकः अधः कथं कार्यान्वितः भवति ?