Technology sharing

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

Overview

• per priorem articulum Webpack: Dependentia lacinia purus administrat clientelas inter modulorum , singillatim exposuimus quomodo "aedificare" tempus ab Entry incipit et paulatim recursively legit et parses moduli contenti, et tandem graphi dependentiae moduli construit - objectum ModuleGraph. In hoc articulo, pergimus explicare quomodo Chunks ex ModuleGraph contenta in altera scaena "encapsulationis" ordinare, et ulterius principale processum de ChunkGroup et ChunkGraph depen- dendi obiectis aedificare.

Praeter praecipuum processum, varias notiones obscuras singillatim explicabimus;

• Quid sunt Chunk, ChunkGroup, et ChunGraph obiecta? Quale commercium inter eos est?
• Webpack scriptor default sub-packaging praecepta ac problemata in regulis.

ChunkGraph processum aedificium

pro Init、Make、Seal"In" induximus structuram subiectam logicam Webpack in duriter dividi posse: "Initialization, constructio, packaging"Tres gradus:

in"Construe"Phasis responsabilis est ad clientelas inter modulorum et theologorum constituendos examinandas" Dependentia graph(ModuleGraph);Encapsulation“Scaena, secundum dependentiam graphi, moduli separatim in plura Chunk obiecta encapsulae sunt, et parente-parens dependentiae relationes inter Chunks in ChunkGraph et plures res ChunkGroup sorted sunt.

Praecipuum propositum periodi "encapsulationis" est construere relationem ChunkGraph graphi fundatam ex relatione graphi ModuleGraph collecti in "aedificare" phase.

Breviter expone logicam plurium gradibus momentis hic exsecutionem.

Primus gradus est valde criticus; translatioseal() Post munus, percurreentry Configurationis, vacuum creare pro singulis viscusChunk etEntryPoint object (a specialeChunkGroup) Et initio basic ChunkGraph Necessitudinem structuralem para gradum proximum, codicem clavis:

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);
    // 触发各种优化钩子
    // ...
  }
}

Expleto exsecutione, sequenti notitia structura formatur;

Secundo, si figuratur in hoc tempore entry.runtime, Webpack etiam codicem runtime in hac scaena providebit creo Et directe correspondentes Chunkdistribute Dareentry correspondentesChunkGroup objectum.Dicitur omnia paratabuildChunkGraph munus, accede ad gradum proximum.

Duo gradus: existbuildChunkGraph intra munustranslatio visitModules Munus, ModuleGraph percurre et omnes Modulos diversis modulis secundum earum dependentias assignare.Chunk Obiecto;async moduliErgo modulus creonovus ChunkGroup etChunk Obiecto, demum sequenti notitia structura formans;

tertius gradus; existbuildChunkGraph in munustranslatio connectChunkGroups modum, statuamChunkGroup inter,Chunk clientelas inter se generare completamChunkGraph Obiecto, demum sequenti notitia structura formans;

quartus gradus; existbuildChunkGraph in munustranslatio cleanupUnconnectedGroups Modus, tersus invalidum estChunkGrouppraesertim in optimizatione perficiendi munere funguntur.

His quatuor gradibus a summo ad imum eundo;ModuleGraph Modi conditi in tribus obiectis Chunk diversis assignabuntur: Ingressus, Async, et Runtime secundum ipsius moduli naturam, et clientelas inter Chunks in collectionibus ChunkGraph et ChunkGroup reponentur postea.SplitChunksPlugin) , cognosce subcontracting optimizationem componendo et collocando dominium Module et Chunk obiecta.

vs ChunkGroup nobis

Praecedens constructionis processus tria objecta clavis implicat: Chunk, ChunkGroup et ChunkGraph. Primum summatim eorum notiones et functiones ad intellectum nostrum profundiorem reddamus;

• Chunk: Module pro modulis contentis legere adhibetur, inter modulos dependentias recordum, etc.

• ChunkGroup:unus ChunkGroup contineat velChunk objectum;ChunkGroup etChunkGroup Parentis puerilis dependentia necessitudo intercedit;

• ChunkGraphDenique Webpack repone clientelas inter Chunks et ChunkGroups in compilation.chunkGraph In obiecto, relationes tali specie formantur;
  

Default subcontracting praecepta

Superius ChunkGraph Processus constructum ultimo modulum in tria genera Chunks ordinabit:

• Ingressus Chunk: idem entry Modi inferioris tactus in Chunk ordinantur;
• Async Chunk: Modulus asynchronus separatim in Chunk ordinatur;
• Runtime Chunk：entry.runtime Quando non vacat, modulus runtime in Chunk constituetur.

Hoc aedificatur ad Webpack, nisi usus splitChunks In aliis obturaculis, regulae defaltae pro destinata moduli input ad output unum sunt e clavibus principiis Webpack subiectis, quare necesse est regulas specificas cuiusque Chunk introducere.

Ingressus Chunk:

Satus cum ingressu Chunk, Webpack primum entry creoChunk Obiecto, verbi gratia, schematismi sequenti:

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

Traverse entry proprietatibus object et crearechunk[main] 、chunk[home] Duo obiecta, hoc tempore duo Chunks respective continentmain 、home OMNIBUS:

Post initialization completum, Webpack voluntatem ModuleGraph dependentia data, willentry Omnes moduli ab his tacti in Chunk referti sunt (occurrit invisitModules method), exempli gratia, pro file clientela sequenti;

main.js Si quattuor lima a/b/c/d directe vel indirecte referenced sunt synchrone, Webpack primum eritmain.js Modulus Chunk et EntryPoint obiecta creat, et paulatim addit modulorum modulorum a/b/c/dchunk[main] postremo formans;

Async Chunk:

Secundo, Webpack ordinabit singula enuntiationem asynchronam importare (import(xxx) etrequire.ensure ) discursum ut objectum separatum Chunk, et omnia ejus submodula huic Chunk accedunt, Async Chunk vocamus. For example, ad hunc exemplum:

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

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

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

In ingressum modulus index.js In sync-a et sync-b synchrone introducuntur; asynchrone modulus async-e introducitur; simul in async-a, modulus synchrone introducitur.sync-c modulus, sequens moduli dependentiae schematis;

Hoc loco Webpack erit punctum ingressum index.js, Modulus asynchronous async-a.js Create subpackages separatim formare sequentes Chunk structuram

et chunk[index] etchunk[async-a] Una via inter eos formatur dependentia, et Webpack hanc dependentiam servabitChunkGroup._parents 、ChunkGroup._children in proprietatibus.

Runtime Chunk:

Denique, excepto entry , Praeter modulorum asynchronorum, Webpack5 etiam suffragatur in Chunks seorsim codicem runtim extrahendum. Codicis runtime de quo hic agitur ad seriem textuum compaginatorum fundamentalium a Webpack injectorum ad curare ut productum sarcinad normaliter currere possit.

Magna sectio codicis in capsula rubra in tabula supra picta est runtime codice dynamice a Webpack generatus. Cum componendis, Webpack iudicabit uter codicem runtime ad output innixum in codice negotii (substructio)Dependency genus), exempli gratia;

• necessitudo __webpack_require__.f、__webpack_require__.r aliaque munera modulari subsidia minimum assequi;
• Si pluma loading dynamica uteris, scribere debes __webpack_require__.e officium;
• Si lineamentum Foederationis Module uteris, scribere debes __webpack_require__.o officium;
• etc.

Licet unaquaeque pars codicis runtimi sit parva, cum lineamenta auget, ultimus eventus maior et maior fiet. Praesertim multi- viscus applicationes, est aliquid damnosum, ut saepe involucrum simile runtime in sulum ingressu entry.runtime Configurationis items adhibentur ad declarandum quomodo runtime code sarcinad est.Ad usum, just useentry Addere linea forma ad itemruntime pretii, exempli gratia;

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

exist compilation.seal In munere, Webpack primum estentry creoEntryPointErgo iudicare entry Habet configurationeruntime proprietates, si quae sunt, fac cum illisruntime Valor est nomen Chunk. Ergo hoc exemplum figuratio duos Chunks generabit;chunk[index.js] 、chunk[solid-runtime]et ex hoc duo fasciculi postremo output sunt;

• Respondens ad ostium index index.js documentum;
• Configuratione runtime correspondentes solid-runtime.js documentum.

in multis entry In sem, justo ut ipsumentry Omnes idemruntime valorem, the webpack in runtime code mergetur et in eodem Runtime Chunk scriptus est, tandem optimizationem producti assequendi. For example, for the following configuration : ;

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

introitus index、home participes eiusdemruntime valorem, postremo tres Chunks, respective;

Introitus in hoc tempore chunk[index]、chunk[home] cum runtimechunk[solid-runtime] Parentis puerilis relatio dependentia etiam formabitur.

Exitus cum subcontracting praecepta

Maxima quaestio de defectu regulae sub-packaging est quod moduli duplicationem solvere non potest. Si plures Chunks eundem Modulum simul contineant, hic Modulus identidem his Chunks sine restrictione sarcinarum erit. Exempli gratia, habemus duas viscus principale/indicem utrumque ab eodem modulo pendere:

Defalta, Webpack non faciet processus additicius in hoc, sed solum fasciculi c moduli in praecipuum/indicem duo Chunks simul, ultimo formantes:

videri potest chunk ab invicem segregantur, modulus c saepe sarcinatur, quae superflua perficiendi detrimentum causat finali uber!

Ad hanc quaestionem solvendam, Webpack 3 introductus est CommonChunkPlugin Plugin conatus extrahere communes clientelas inter viscus in separatoschunk, sed CommonChunkPlugin Hoc essentialiter impletur secundum vinculum relationis simplicis parentis-filii inter Chunks. Difficile est colligere tertiam sarcinam extractam utendam esseentry paterchunk Adhuc hedumchunk，CommonChunkPlugin una processus pro parentechunkin quibusdam casibus magnum negativum effectum habet.

Quam ob rem, magis implicatae structurae notitiae speciatim introductae sunt post Webpack 4-- ChunkGroup Specialitas in cognoscendo relationem catenam procurationem et cooperationemSplitChunksPlugin perfici potest efficacius et intelligentiusHeuristica subcontracting.

Summatim

In summa, "Aedificare" tempus est ad construendum moduleGraph secundum relationem moduli referentis; "Encapsulation" tempus respondetur ad seriem rerum Chunk fundatam in ModuleGraph constituendam et dependentias inter Chunks (asynchronas references, runtime ) in ChunkGraph - Chunk Dependency graph objectum. Similis moduleGraph, introductio ChunkGraph structuram etiam logicam dependentiarum inter Chunks decou- lere potest, ut logicam altiorem architecturae magis rationabilem ac faciliorem reddat.

Quamquam, quamvis valde perplexa spectat, maximi momenti propositum scaenae "packages" adhuc determinare est quot Chunks sunt et qui Moduli in singulis Chunk comprehenduntur - hi sunt factores praecipui qui re vera finem packaging eventum afficiunt.

Ad hoc, necesse est intelligere tres regulas subcontracting Webpack5 constructas: Ingressus Chunk, Async Chunk et Runtime Chunk splitChunksPlugin) omnes in hoc fundantur ope buildChunkGraph Varii hami Urguet postea amplius split, merge, et optimize Chunk structuram ad consequi expansi subcontracting effectus.

cogitare Chunk Voluntas et una tantum produci fasciculus productus? Quare?mini-css-extract-plugin、file-loader Quomodo est hoc genus componentis quod tabulas additas in fundo completas scribere potest?