M
MLOG
JavaScript koda sadalÄ«Å”ana: padziļināts ieskats dinamiskajā ielādē un veiktspējas optimizācijā | MLOG | MLOG ); }

Šajā scenārijā kods `HeavyModal` tiek pieprasīts no servera tikai pirmo reizi, kad lietotājs noklikŔķina uz pogas "Rādīt noteikumus un nosacījumus".

3. TreÅ”o puÅ”u bibliotēku sadalÄ«Å”ana (piegādātāju daļas)

JÅ«su lietotnes kods bieži ir atkarÄ«gs no treÅ”o puÅ”u bibliotēkām no `node_modules` (piemēram, React, Lodash, D3.js, Moment.js). Å Ä«s bibliotēkas mainās daudz retāk nekā jÅ«su paÅ”u lietotnes kods. Sadalot tās atseviŔķā "piegādātāja" gabalā, jÅ«s varat izmantot pārlÅ«kprogrammas ilgtermiņa keÅ”atmiņu.

Kad jÅ«s izvietojat izmaiņas savā lietotnes kodā, lietotājam ir jālejupielādē tikai mazais, mainÄ«tais lietotnes gabals. Daudz lielākais piegādātāja gabals var tikt pasniegts tieÅ”i no pārlÅ«kprogrammas keÅ”atmiņas, nodroÅ”inot zibensātras nākamās lapu ielādes.

Modernie saiņotāji, piemēram, Webpack (ar tā `SplitChunksPlugin`) un Vite, ir neticami gudri Å”ajā jautājumā. Tie bieži var automātiski izveidot piegādātāju gabalus, pamatojoties uz moduļu lietojumu un izmēru, prasot minimālu konfigurāciju.

Webpack `splitChunks` konfigurācijas piemērs:


// webpack.config.js
module.exports = {
  // ... citas konfigurācijas
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[/]node_modules[/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Veiktspējas optimizācijas ieguvums: ietekmes mērÄ«Å”ana

Koda sadalÄ«Å”anas ievieÅ”ana nav tikai teorētisks vingrinājums; tā sniedz taustāmus, izmērāmus veiktspējas ieguvumus, kas tieÅ”i uzlabo lietotāja pieredzi un jÅ«su Core Web Vitals rādÄ«tājus.

Padziļinātas tehnikas un labākās prakses

Kad esat apguvis pamatus, jūs varat tālāk pilnveidot savu ielādes stratēģiju, izmantojot sarežģītākas tehnikas.

IepriekŔēja ienese un iepriekŔēja ielāde

Dinamiskā ielāde ir lieliska, bet tā rada nelielu aizkavi, kad lietotājs ierosina darbību, jo pārlūkprogrammai ir jāsaņem jaunais gabals. Mēs to varam mazināt, izmantojot resursu norādes:

Saiņotāji, piemēram, Webpack, ļauj to viegli izdarīt ar "maģiskajiem komentāriem":


// IepriekÅ” ienest informācijas paneļa kodu, kad Å”is modulis tiek novērtēts
const DashboardPage = lazy(() => 
  import(/* webpackPrefetch: true */ './pages/DashboardPage')
);

SadalÄ«Å”anas punktu identificÄ“Å”ana ar saiņu analizatoriem

Kā zināt, ko sadalÄ«t? Neminiet ā€” analizējiet! RÄ«ki, piemēram, `webpack-bundle-analyzer` vai `source-map-explorer`, Ä£enerē interaktÄ«vu koka kartes vizualizāciju jÅ«su saiņiem. Tas ļauj nekavējoties identificēt lielākos moduļus un bibliotēkas, kas ir galvenie kandidāti sadalÄ«Å”anai.

IzvairÄ«Å”anās no tÄ«kla kaskādēm

Esiet uzmanÄ«gi, veidojot dinamisku importu ķēdes, kur vienam gabalam ir jāielādējas, pirms tas var izraisÄ«t cita ielādi. Kad vien iespējams, ierosiniet vairāku nepiecieÅ”amo gabalu ielādi paralēli, lai samazinātu kopējo ielādes laiku.

Noslēgums: koda sadalÄ«Å”ana nav apspriežama

Cīņā par optimālu tÄ«mekļa veiktspēju, koda sadalÄ«Å”ana ir attÄ«stÄ«jusies no niÅ”as optimizācijas par standarta, bÅ«tisku praksi jebkurai nopietnai tÄ«mekļa lietotnei. Pārejot no monolÄ«tas uz pēc pieprasÄ«juma ielādes stratēģiju, jÅ«s cienāt sava lietotāja laiku, datus un ierÄ«ces resursus.

Ieguvumi ir skaidri un pārliecinoŔi:

Ar moderniem rÄ«kiem un ietvaru atbalstu, uz marÅ”rutiem un komponentiem balstÄ«tas sadalÄ«Å”anas ievieÅ”ana nekad nav bijusi vieglāka. Ir pienācis laiks rÄ«koties. Analizējiet savu saini, identificējiet lielākās atkarÄ«bas un vismazāk izmantotos marÅ”rutus un ieviesiet savu pirmo sadalÄ«Å”anas punktu. JÅ«su lietotāji ā€” un jÅ«su veiktspējas rādÄ«tāji ā€” jums par to pateiksies.