Scoilt cód in uilleach nó conas comhpháirteanna a roinnt idir modúil leisciúla

Tabharfaidh an t-alt seo tuiscint níos fearr duit ar an gcaoi a roinnfidh Dronuilleach do chód ina smutáin.

Má tá eagla ort ó aschur CLI uilleach a léiríodh thuas nó má tá tú aisteach conas a tharlaíonn an scoilteadh cód sin is duitse an post seo.

Ligeann scoilteadh cód duit do chód a roinnt ina bhabhtaí éagsúla is féidir a luchtú ansin ar éileamh. Má úsáidtear i gceart é, féadfaidh sé tionchar mór a imirt ar am ualaigh.

Clár ábhair

  1. Cén fáth ar chóir dom cúram a dhéanamh?
  2. Scoilt uilleach CLI scoilteadh faoin gcochall
  3. Feidhmchlár Dronuilleach Simplí le modúil leisciúla
  4. Conas comhpháirteanna a roinnt idir modúil leisciúla
  5. Conclúid

Cén fáth ar chóir dom cúram a dhéanamh?

Samhlaímid gur chuir tú tús le tionscadal uilleach nua-aimseartha. Léann tú go leor acmhainní ar conas feidhmchlár Dronuilleach a ailtireacht, cad é an struchtúr fillteán cuí agus, an rud is tábhachtaí, conas feidhmíocht iontach tosaithe a choinneáil.

Roghnaigh tú Angular CLI agus chruthaigh tú feidhmchlár modúlach le go leor modúl gné luchtaithe leisciúla. Agus ar ndóigh, chruthaigh tú modúl roinnte ina gcuireann tú treoracha, píopaí agus comhpháirteanna a úsáidtear go coitianta.

Tar éis tamaill, ghlac tú ort féin ag smaoineamh go mbíonn claonadh agat an fheidhmiúlacht seo a bhogadh go dtí an modúl comhroinnte aonair sin a luaithe a éilíonn do mhodúl gné nua roinnt feidhmiúlachta ó mhodúil gné eile.

Forbraíonn an feidhmchlár agus go luath thug tú faoi deara nach gcomhlíonann a chuid ama tosaithe d’ionchas (agus, níos tábhachtaí fós, do chliant).

Anois, tá amhras ort…

  • Má chuirim mo phíopaí, mo threoracha agus mo chomhchodanna go léir i modúl mór roinnte amháin agus ansin é a iompórtáil i modúil luchtaithe leisciúla (nuair nach n-úsáideann mé ach ceann amháin nó dhá cheann de na gnéithe allmhairithe) is dócha go bhféadfadh sé dúbailtí cód neamhúsáidte a chur faoi deara sna comhaid aschuir. .
  • Ar an láimh eile, má roinnim gnéithe comhroinnte i measc roinnt modúl comhroinnte agus mura n-iompórtálann mé ach na cinn acu a theastaíonn i ngach modúl ar leith an laghdóidh sé méid mo aip? Nó Dronuilleach a dhéanann gach barrfheabhsú den sórt sin de réir réamhshocraithe?

Déanaimis demystify!

Scoilt uilleach CLI scoilteadh faoin gcochall

Mar is eol dúinn uile, úsáideann an leagan reatha uilleach CLI mála gréasáin chun cuachta a dhéanamh. Ach in ainneoin sin, tá webpack freagrach freisin as scoilteadh cód.

Mar sin, déanaimis féachaint ar an gcaoi a ndéanann mála gréasáin é.

Thug Webpack 4 SplitChunksPlugin isteach a ligeann dúinn roinnt heoraíochta a shainiú chun modúil a roinnt ina smutáin. Gearánann a lán daoine gur cosúil go bhfuil an chumraíocht seo mistéireach. Agus ag an am céanna, is é seo an chuid is suimiúla de scoilteadh cód.

Ach sula gcuirtear optamú SplitChunksPlugin i bhfeidhm cruthaíonn mála gréasáin smután nua:

  • do gach pointe iontrála

Cumraíonn CLI uilleach na pointí iontrála seo a leanas

príomh stíleanna polyfills

rud a fhágfaidh go mbeidh na smutáin leis na hainmneacha céanna orthu.

  • do gach modúl atá luchtaithe go dinimiciúil (trí chomhréir allmhairithe () a úsáid a chloíonn le togra ECMAScript maidir le hallmhairí dinimiciúla)

An cuimhin leat comhréir loadChildren? Is é seo an comhartha do webpack chun smután a chruthú.

Anois déanaimis bogadh ar aghaidh chuig an SplitChunksPlugin. Is féidir é a chumasú taobh istigh de bhloc optamaithe webpack.config.js

Breathnaímid ar chód foinse uilleach CLI agus faighimid an chuid cumraíochta sin:

Cumraíocht SplitChunksPlugin i CLI uilleach 8

Beimid ag díriú ar roghanna cacheGroups anseo ós rud é gurb é seo an “t-oideas” le haghaidh mála gréasáin ar conas smutáin scartha a chruthú bunaithe ar roinnt coinníollacha.

Is gnáthrud é cacheGroups nuair is ainm grúpa an eochair. Go bunúsach, is féidir linn smaoineamh ar ghrúpa taisce mar dheis fhéideartha chun smután nua a chruthú.

Tá go leor cumraíochtaí ag gach grúpa agus is féidir leo cumraíocht a oidhreacht ó leibhéal splitChunks.

Déanaimis fíor-thapa ar na roghanna a chonaic muid i gcumraíocht uilleach CLI thuas:

  • is féidir luach smután a úsáid chun modúil a scagadh idir giotaí sync agus async. Is féidir a luach a bheith tosaigh, async nó go léir. ní chiallaíonn tosaigh ach comhaid a chur leis an smután má allmhairítear iad taobh istigh de ghiotaí sionc. ní chiallaíonn async ach comhaid a chur leis an smután má allmhairítear iad taobh istigh de smutáin async (async de réir réamhshocraithe)
  • Deir minChunks le mála gréasáin gan modúil a instealladh i smután má roinntear iad idir 2 smután ar a laghad (1 de réir réamhshocraithe)
  • insíonn an t-ainm do webpack an t-ainm sin a úsáid le haghaidh smután nua-chruthaithe. Má dhéantar sreang nó feidhm a shonrú a fhilleann ar an tsreang chéanna i gcónaí, cumascfar gach modúl coiteann ina smután amháin.
  • úsáidtear luach tosaíochta chun na smutáin is fearr a mheaitseáil a aithint nuair a thagann modúl faoi go leor grúpaí smután.
  • Insíonn forfheidhmiú do webpack neamhaird a dhéanamh ar roghanna minSize, minChunks, maxAsyncRequests agus maxInitialRequests agus smutáin a chruthú don ghrúpa taisce seo i gcónaí. Tá gotcha beag amháin anseo: má chuirtear aon cheann de na roghanna neamhshuite sin ar fáil ag leibhéal an chacheGroup ansin úsáidfear an rogha sin fós.
  • rialuithe tástála ar na modúil a roghnaíonn an grúpa taisce seo. Mar a d’fhéadfaimis a thabhairt faoi deara, úsáideann CLI uilleach an rogha seo chun gach spleáchas node_modules a bhogadh go smután díoltóra.
  • úsáidtear minSize chun an íosmhéid a shainaithint, i mbearta, chun smután a ghiniúint. Ní raibh sé le feiceáil i gcumraíocht uilleach CLI ach is rogha an-tábhachtach é ar cheart dúinn a bheith ar an eolas faoi. (Mar a deir an cód foinse, tá sé 30kb de réir réamhshocraithe i dtáirgeadh agus 10kb i dtimpeallacht dev)
Leid: in ainneoin go sainmhíníonn an doiciméadacht mála gréasáin mainneachtainí dhéanfainn tagairt do chód foinse webpack chun na luachanna beachta a fháil

Déanaimis athshlánú anseo: Bogfaidh CLI uilleach modúl chuig:

  • smután díoltóra má tá an modúl sin ag teacht ó eolaire node_modules.
  • smután réamhshocraithe má allmhairítear an modúl sin taobh istigh de mhodúl async agus má roinntear é idir dhá mhodúl ar a laghad. Tabhair faoi deara go bhfuil go leor smután réamhshocraithe indéanta anseo. Míneoidh mé conas a ghineann webpack ainmneacha do na smutáin sin níos déanaí.
  • smután coiteann má allmhairítear an modúl sin laistigh de mhodúl async agus má roinntear é idir dhá mhodúl ar a laghad agus nár tháinig sé faoi smután réamhshocraithe (tosaíocht dia duit) agus is cuma cén méid é (a bhuíochas sin do rogha an fhórsa)

Teoiric go leor, déanaimis cleachtadh.

Feidhmchlár uilleach simplí le modúil leisciúla

Chun próiseas SplitChunksPlugin a mhíniú, táimid chun tosú le leagan simplithe den fheidhmchlár Dronuilleach:

aip ├── a (leisciúil) │ └── a.component.ts │ └── a.module.ts │ ├── ab │ └── ab.component.ts │ └── ab.module.ts │ ├── b (leisciúil) │ └── b.component.ts │ └── b.module.ts │ └── c (leisciúil) │ └── c.component.ts │ └── c.module. ts │ └── cd │ └── cd.component.ts │ └── cd.module.ts │ └── d (leisciúil) │ └── d.component.ts │ └── d.module.ts │ └── roinnte │ └── shared.module.ts │ └── app.component.ts └── app.module.ts

Is modúil leisciúla iad a, b, c agus d, rud a chiallaíonn go ndéantar iad a allmhairiú trí chomhréir allmhairithe () a úsáid.

úsáideann comhpháirteanna a agus b ab ab ina dteimpléid. úsáideann comhpháirteanna c agus d comhpháirt cd.

Spleáchais idir mhodúil uilleach

Is é an difríocht idir ab.module agus cd.module ná go ndéantar ab.module a allmhairiú in a.module agus b.module agus go ndéantar cd.module a allmhairiú i modúl roinnte.

Déanann an struchtúr seo cur síos go díreach ar na hamhrais a theastaigh uainn a mhícheartú. Déanaimis a fháil amach cá mbeidh modúil ab agus cd san aschur deiridh.

Algartam

1) Tosaíonn algartam SplitChunksPlugin le hinnéacs a thabhairt do gach smután a cruthaíodh roimhe seo.

smutáin de réir innéacs

2) Ansin lúbann sé na modúil go léir le chéile chun Léarscáil chunkSetsInGraph a líonadh. Taispeánann an foclóir seo na píosaí a roinneann an cód céanna.

chunkSetsInGraph

Eg 1,2 príomh, ciallaíonn ró-líonadh go bhfuil modúl amháin ar a laghad le feiceáil i dhá smután: príomh agus polyfill.

roinneann modúil a agus b an cód céanna ó mhodúl ionas gur féidir linn an teaglaim (4,5) thuas a thabhairt faoi deara.

3) Siúil trí gach modúl agus faigh amach an féidir smután nua a chruthú do ghrúpa taisce ar leith.

3a) Ar an gcéad dul síos, cinneann webpack an féidir modúl a chur le cacheGroup ar leith trí mhaoin thecacheGroup.test a sheiceáil.

tástálacha ab.module

tástáil réamhshocraithe neamhshainithe => ceart go leor
tástáil choitianta neamhshainithe => ceart go leor
feidhm tástála díoltóra => bréagach

níor shainigh grúpa taisce réamhshocraithe agus coitianta an mhaoin is teo agus mar sin ba chóir dó é a rith. Sainmhíníonn grúpa taisce díoltóra feidhm ina bhfuil scagaire ann chun modúil a áireamh ó chosán thenode_modules.

Tá tástálacha cd.module mar an gcéanna.

3b) Anois tá sé in am siúl trí gach teaglaim smután.

Tuigeann gach modúl na smutáin a fheictear dó (a bhuíochas sin do mhaoin module.chunksIterable).

allmhairítear ab.module ina dhá phíosa leisciúla. Mar sin is iad na teaglamaí atá aige (4), (5) agus (4,5).

Ar an láimh eile, ní allmhairítear cd.module ach sa mhodúl téite, rud a chiallaíonn nach ndéantar é a allmhairiú ach i smután téamaí. Níl ach a chomhcheangail (1).

Ansin scagairí breiseáin teaglaim de réir mhéid minChunk:

más rud é (chunkCombination.size 

Ós rud é go bhfuil an teaglaim (4,5) ag ab.module ba chóir dó an seic seo a rith. Ní féidir linn é seo a rá faoi cd.module. Ag an bpointe seo, tá an modúl seo fós le maireachtáil taobh istigh den phríomh-smután.

3c) Tá seiceáil amháin eile le cacheGroup.chunkds (tosaigh, async nó gach ceann)

allmhairítear ab.module taobh istigh de smutáin async (luchtaithe leisciúla). Seo go díreach a éilíonn grúpaí taisce réamhshocraithe agus coitianta. Sa chaoi seo cuirtear ab.module le dhá phíosa nua féideartha (réamhshocraithe agus coitianta).

Gheall mé é níos luaithe mar sin seo linn.

Conas a ghineann webpack an t-ainm ar smután a chruthaigh SplitChunksPlugin?

Is féidir an leagan simplithe de sin a léiriú mar

áit:

  • groupName is ainm don ghrúpa (réamhshocrú inár gcás)
  • ~ is defaultAutomaticNameDelimiter
  • Tagraíonn chunkNames do liosta na n-ainmneacha smután uile atá san áireamh sa ghrúpa sin. Tá an t-ainm sin cosúil le cosán fullPath ach in ionad slais úsáideann sé -.

Eg dd-modúl ciallaíonn sé go bhfuil comhad d.module againn i bhfillteán d.

Mar sin, tar éis dúinn úsáid a bhaint as ('./ a / a.module') agus allmhairiú ('./ b / b.module') a fhaighimid

Struchtúr ainm smután réamhshocraithe

Rud amháin eile is fiú a lua ná nuair a shroicheann fad ainm smután 109 carachtar, déanann mála gréasáin é a ghearradh agus roinnt hash a chur leis ag an deireadh.

Struchtúr ainm smután mór a roinneann cód thar mhodúil leisciúla iolracha

Táimid réidh chun smutáinInfoMap a líonadh a bhfuil eolas acu ar gach píosa nua a d’fhéadfadh a bheith ann agus a bhfuil a fhios aige freisin cé na modúil ba chóir a bheith ann agus smutáin ghaolmhara ina gcónaíonn na modúil sin faoi láthair.

chunksInfoMap

Tá sé in am píosaí féideartha a scagadh

Lúbann SplitChunksPlugin thar earraí chunksInfoMap d’fhonn an iontráil meaitseála is fearr a fháil. Céard is brí leis?

tá tosaíocht 10 ag grúpa taisce réamhshocraithe a dhéanann ró-mheas (nach bhfuil ach 5 aige). Ciallaíonn sé seo gurb é réamhshocrú an iontráil meaitseála is fearr agus ba cheart é a phróiseáil ar dtús.

Chomh luath agus a chomhlíontar na riachtanais eile go léir baintear an modúl smután as smutáin fhéideartha eile i bhfoclóir chunksInfoMap. Mura bhfuil modúl fágtha ansin scriostar an modúl

Sa chaoi seo tugtar tús áite do mhodúl réamhshocraithe ~ aa-modúl ~ bb-modúl thar an smután neamhchoitianta. Baintear an dara ceann díobh ós rud é go bhfuil an liosta céanna modúl ann.

Is é an chéim dheireanach ach ní a laghad ná roinnt barrfheabhsúcháin a dhéanamh (cosúil le dúbailtí a bhaint) agus a chinntiú go gcomhlíontar na ceanglais go léir mar maxSize.

Is féidir cód foinse iomlán SplitChunksPlugin a fháil anseo

Fuaireamar amach go gcruthaíonn mála gréasáin smutáin ar thrí bhealach éagsúla:

  • do gach iontráil
  • do mhodúil atá luchtaithe go dinimiciúil
  • le haghaidh cód roinnte le cabhair ó SplitChunksPlugin
Aschur CLI uilleach de réir an chineáil smutáin

Anois déanaimis dul ar ais chuig ár n-amhras faoi cad é an bealach is fearr chun cód roinnte a choinneáil.

Conas comhpháirteanna a roinnt idir modúil leisciúla

Mar a chonaiceamar inár bhfeidhmchlár uilleach simplí, chruthaigh mála gréasáin smután scartha le haghaidh ab.module ach chuimsigh sé cd.module sa phríomh-smután.

Déanaimis achoimre ar na príomhbharraí beir leat ón bpost seo:

  • Má chuireann muid na píopaí, na treoracha agus na comhpháirteanna comónta go léir i modúl mór roinnte amháin agus ansin é a iompórtáil i ngach áit (taobh istigh de shioncanna sionc agus async) ansin beidh an cód sin inár bpríomh-smután tosaigh. Mar sin más mian leat drochfheidhmíocht ualaigh tosaigh a fháil ansin is é an bealach le dul é.
  • Ar an láimh eile, má roinnimid cód a úsáidtear go coitianta thar mhodúil luchtaithe leisciúla, cruthófar smután roinnte nua agus ní dhéanfar é a luchtú ach má tá aon cheann de na modúil leisciúla sin luchtaithe. Ba cheart go bhfeabhsódh sé seo ualach tosaigh an fheidhmchláir. Ach déan é go ciallmhar mar uaireanta is fearr cód beag a chur i smután amháin a bhfuil an iarraidh bhreise ag teastáil uaidh le haghaidh ualach smután ar leithligh.

Conclúid

Tá súil agam anois gur cheart duit aschur CLI uilleach a thuiscint go soiléir agus idirdhealú a dhéanamh idir iontráil, dinimiciúil agus scoilte trí úsáid a bhaint as smutáin SplitChunksPlugin.

Códú sona!