JavaScript rinkinio optimizavimo strategija: pažangios kodo skaidymo technikos

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));

function App() {
  return (
    
      Loading...

Šiame pavyzdyje komponentai `Home`, `About` ir `Products` įkeliami dinamiškai naudojant `React.lazy()`. Komponentas `Suspense` pateikia atsarginę vartotojo sąsają (įkėlimo indikatorių), kol komponentai įkeliami. Tai užtikrina, kad vartotojas nematys tuščio ekrano laukdamas, kol bus atsisiųstas kodas. Šie puslapiai dabar padalyti į atskirus gabalus ir įkeliami tik naršant į atitinkamus maršrutus.

Pažangios kodo skaidymo technikos

Be pagrindinių kodo skaidymo tipų, kelios pažangios technikos gali dar labiau optimizuoti JavaScript rinkinius.

1. Pardavėjo skaidymas

Pardavėjo skaidymas apima trečiųjų šalių bibliotekų (pvz., React, Angular, Vue.js) atskyrimą į atskirą rinkinį. Kadangi šios bibliotekos keičiasi rečiau, palyginti su programos kodu, naršyklė gali jas efektyviau talpykloje.

Pavyzdys (Webpack):

module.exports = {
  // ... kitos konfigūracijos
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

Ši Webpack konfigūracija sukuria atskirą rinkinį, pavadintą `vendors.bundle.js`, kuriame yra visas kodas iš katalogo `node_modules`.

2. Bendro gabalo išgavimas

Bendro gabalo išgavimas nustato kodą, kuris yra bendrinamas tarp kelių rinkinių, ir sukuria atskirą rinkinį, kuriame yra bendrinamas kodas. Tai sumažina dubliavimąsi ir pagerina talpyklos efektyvumą.

Pavyzdys (Webpack): module.exports = { // ... kitos konfigūracijos optimization: { splitChunks: { chunks: 'all', minSize: 20000, // Minimalus dydis baitais, kad būtų sukurtas gabalas. maxAsyncRequests: 30, // Didžiausias lygiagrečių užklausų skaičius, kai įkeliama pagal poreikį. maxInitialRequests: 30, // Didžiausias lygiagrečių užklausų skaičius įėjimo taške. automaticNameDelimiter: '~', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, // Minimalus gabalų skaičius, kuriuose turi būti bendrinamas modulis prieš skaidant. priority: -20, reuseExistingChunk: true } } } } };

Ši konfigūracija automatiškai ištrauks bendrus gabalus pagal nurodytus kriterijus (pvz., `minChunks`, `minSize`).

3. Maršruto išankstinis parsiuntimas ir išankstinis įkėlimas

Išankstinis parsiuntimas ir išankstinis įkėlimas yra technikos, skirtos iš anksto įkelti išteklius, numatant vartotojo būsimus veiksmus. Išankstinis parsiuntimas atsisiunčia išteklius fone, kol naršyklė neveikia, o išankstinis įkėlimas prioritetą teikia konkrečių išteklių, kurie yra būtini dabartiniam puslapiui, įkėlimui.

Išankstinio parsiuntimo pavyzdys:

Ši HTML žyma nurodo naršyklei iš anksto parsiųsti failą `about.bundle.js`, kai naršyklė neveikia. Tai gali žymiai pagreitinti naršymą į puslapį Apie.

Išankstinio įkėlimo pavyzdys:

Ši HTML žyma nurodo naršyklei prioritetą teikti failo `critical.bundle.js` įkėlimui. Tai naudinga įkeliant kodą, kuris yra būtinas pradiniam puslapio atvaizdavimui.

4. Medžio drebėjimas

Medžio drebėjimas yra technika, skirta pašalinti negyvą kodą iš JavaScript rinkinių. Jis nustato ir pašalina nenaudojamas funkcijas, kintamuosius ir modulius, todėl rinkinio dydžiai yra mažesni. Rinkiniai, tokie kaip Webpack ir Rollup, palaiko medžio drebėjimą iš karto.

Pagrindiniai medžio drebėjimo aspektai:

• Naudokite ES modulius (ESM): Medžio drebėjimas remiasi statine ES modulių struktūra (naudojant `import` ir `export` teiginius), kad nustatytų, kuris kodas nenaudojamas.
• Venkite šalutinių poveikių: Šalutiniai poveikiai yra kodas, kuris atlieka veiksmus už funkcijos ribų (pvz., keičia globalius kintamuosius). Rinkiniams gali būti sunku drebinti kodą su šalutiniais poveikiais.
• Naudokite savybę `sideEffects` faile `package.json`: Galite aiškiai nurodyti, kurie failai pakete turi šalutinių poveikių, naudodami savybę `sideEffects` faile `package.json`. Tai padeda rinkiniui optimizuoti medžio drebėjimą.

5. Žiniatinklio darbuotojų naudojimas skaičiavimo intensyvioms užduotims

Žiniatinklio darbuotojai leidžia paleisti JavaScript kodą foniniame sraute, neleidžiant pagrindiniam srautui būti užblokuotam. Tai gali būti ypač naudinga skaičiavimo intensyvioms užduotims, tokioms kaip vaizdo apdorojimas, duomenų analizė ar sudėtingi skaičiavimai. Perkeliant šias užduotis į žiniatinklio darbuotoją, galite užtikrinti, kad vartotojo sąsaja būtų reaguojanti.

Pavyzdys:

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

worker.postMessage({ data: 'some data for processing' });

// worker.js
self.onmessage = (event) => {
  const data = event.data.data;
  // Perform computationally intensive task
  const result = processData(data);
  self.postMessage(result);
};

function processData(data) {
  // ... your processing logic
  return 'processed data';
}

6. Modulių federacija

Modulių federacija, pasiekiama Webpack 5, leidžia bendrinti kodą tarp skirtingų programų vykdymo metu. Tai leidžia kurti mikro-frontendus ir dinamiškai įkelti modulius iš kitų programų, sumažinant bendrą rinkinio dydį ir pagerinant našumą.

Pavyzdys:

Tarkime, kad turite dvi programas, `app1` ir `app2`. Norite bendrinti mygtuko komponentą iš `app1` į `app2`.

app1 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      }
    })
  ]
};

app2 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3000/remoteEntry.js'
      }
    })
  ]
};

Dabar `app2` galite importuoti ir naudoti mygtuko komponentą iš `app1`:

import Button from 'app1/Button';

Įrankiai ir bibliotekos, skirtos kodo skaidymui

Keli įrankiai ir bibliotekos gali padėti įdiegti kodo skaidymą savo projektuose:

• Webpack: Galingas ir universalus modulių rinktuvas, kuris palaiko įvairias kodo skaidymo technikas, įskaitant įėjimo taško skaidymą, dinaminius importus ir pardavėjo skaidymą.
• Rollup: Modulių rinktuvas, kuris puikiai tinka medžio drebėjimui ir labai optimizuotų rinkinių generavimui.
• Parcel: Nulinės konfigūracijos rinktuvas, kuris automatiškai tvarko kodo skaidymą su minimaliu nustatymu.
• React.lazy: Integruotas React API, skirtas tingiai įkelti komponentus naudojant dinaminius importus.
• Loadable Components: Aukštesnio lygio komponentas, skirtas kodo skaidymui React.

Geriausia kodo skaidymo praktika

Norėdami efektyviai įdiegti kodo skaidymą, apsvarstykite šią geriausią praktiką:

• Analizuokite savo programą: Nustatykite sritis, kuriose kodo skaidymas gali turėti didžiausią poveikį, sutelkdami dėmesį į didelius komponentus, retai naudojamas funkcijas arba maršruto pagrindu nustatytas ribas.
• Nustatykite našumo biudžetus: Apibrėžkite savo svetainės našumo tikslus, tokius kaip tikslinis įkėlimo laikas arba rinkinio dydžiai, ir naudokite šiuos biudžetus, kad vadovautumėtės savo kodo skaidymo pastangoms.
• Stebėkite našumą: Stebėkite savo svetainės našumą įdiegę kodo skaidymą, kad įsitikintumėte, jog jis duoda norimus rezultatus. Naudokite tokius įrankius kaip Google PageSpeed Insights, WebPageTest arba Lighthouse, kad įvertintumėte našumo metrikas.
• Optimizuokite talpyklos naudojimą: Sukonfigūruokite savo serverį tinkamai talpykloje JavaScript rinkinius, kad sumažintumėte vartotojų poreikį atsisiųsti kodą vėlesnių apsilankymų metu. Naudokite talpyklos neigimo technikas (pvz., pridėkite maišą prie failo pavadinimo), kad užtikrintumėte, jog vartotojai visada gaus naujausią kodo versiją.
• Naudokite turinio pristatymo tinklą (CDN): Paskirstykite savo JavaScript rinkinius per CDN, kad pagerintumėte įkėlimo laiką vartotojams visame pasaulyje.
• Apsvarstykite vartotojų demografinius duomenis: Pritaikykite savo kodo skaidymo strategiją prie specifinių savo tikslinės auditorijos poreikių. Pavyzdžiui, jei didelė dalis vartotojų naudojasi lėtais interneto ryšiais, jums gali reikėti agresyviau naudoti kodo skaidymą.
• Automatinė rinkinio analizė: Naudokite tokius įrankius kaip Webpack Bundle Analyzer, kad vizualizuotumėte savo rinkinio dydžius ir nustatytumėte optimizavimo galimybes.

Realaus pasaulio pavyzdžiai ir atvejų analizės

Daugelis įmonių sėkmingai įdiegė kodo skaidymą, kad pagerintų savo svetainės našumą. Štai keletas pavyzdžių:

• Google: Google plačiai naudoja kodo skaidymą savo žiniatinklio programose, įskaitant Gmail ir Google Maps, kad užtikrintų greitą ir reaguojančią vartotojo patirtį.
• Facebook: Facebook naudoja kodo skaidymą, kad optimizuotų įvairių funkcijų ir komponentų įkėlimą, užtikrindamas, kad vartotojai atsisiųstų tik jiems reikalingą kodą.
• Netflix: Netflix naudoja kodo skaidymą, kad pagerintų savo žiniatinklio programos paleidimo laiką, leisdamas vartotojams greičiau pradėti transliuoti turinį.
• Didelės el. komercijos platformos (Amazon, Alibaba): Šios platformos naudoja kodo skaidymą, kad optimizuotų produktų puslapių įkėlimo laiką, pagerindamos apsipirkimo patirtį milijonams vartotojų visame pasaulyje. Jie dinamiškai įkelia produktų informaciją, susijusius elementus ir vartotojų atsiliepimus, atsižvelgdami į vartotojų sąveiką.

Šie pavyzdžiai rodo kodo skaidymo efektyvumą gerinant svetainės našumą ir vartotojo patirtį. Kodo skaidymo principai yra visuotinai taikomi įvairiuose regionuose ir interneto prieigos greičiuose. Įmonės, veikiančios vietovėse, kuriose interneto ryšys yra lėtesnis, gali pasiekti didžiausią našumo pagerėjimą įgyvendindamos agresyvias kodo skaidymo strategijas.

Išvada

Kodo skaidymas yra esminė technika, skirta optimizuoti JavaScript rinkinius ir pagerinti svetainės našumą. Padaliję programos kodą į mažesnius, lengviau valdomus gabalus, galite sumažinti pradinį įkėlimo laiką, pagerinti vartotojo patirtį ir pagerinti talpyklos efektyvumą. Suprasdami skirtingus kodo skaidymo tipus ir priimdami geriausią praktiką, galite žymiai pagerinti savo žiniatinklio programų našumą ir suteikti geresnę patirtį savo vartotojams.

Žiniatinklio programoms tampant vis sudėtingesnėmis, kodo skaidymas taps dar svarbesnis. Sekdami naujausias kodo skaidymo technikas ir įrankius, galite užtikrinti, kad jūsų svetainės būtų optimizuotos našumui ir užtikrintų sklandžią vartotojo patirtį visame pasaulyje.