M
MLOG
Optimizacija zmogljivosti Reacta: Obvladovanje zmanjševanja velikosti paketa | MLOG | MLOG

Vsaka pot v tem primeru naloži svojo komponento leno (lazily), kar izboljša začetni čas nalaganja aplikacije.

2. Odstranjevanje neuporabljene kode (Tree Shaking)

Tree shaking je tehnika, ki iz vaše aplikacije odstrani "mrtvo kodo". Mrtva koda se nanaša na kodo, ki se v vaši aplikaciji dejansko nikoli ne uporabi, vendar je še vedno vključena v paket. To se pogosto zgodi, ko uvozite celotne knjižnice, a uporabite le majhen del njihove funkcionalnosti.

Sodobni zbiralniki paketov JavaScripta, kot sta Webpack in Rollup, lahko samodejno izvajajo tree shaking. Da bi zagotovili učinkovito delovanje, je pomembno uporabljati module ES (sintaksa import in export) namesto CommonJS (sintaksa require). Moduli ES omogočajo zbiralniku paketov, da statično analizira vašo kodo in ugotovi, kateri izvozi se dejansko uporabljajo.

Primer:

Recimo, da uporabljate pomožno knjižnico lodash. Namesto uvoza celotne knjižnice:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

Uvozite samo funkcije, ki jih potrebujete:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

To zagotavlja, da je v vaš paket vključena samo funkcija map, kar znatno zmanjša njegovo velikost.

3. Dinamični uvozi

Podobno kot React.lazy() tudi dinamični uvozi (z uporabo sintakse import()) omogočajo nalaganje modulov po potrebi. To je lahko koristno za nalaganje velikih knjižnic ali komponent, ki so potrebne samo v določenih primerih.

Primer:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // Uporabi MyLargeComponent
}

V tem primeru se bo MyLargeComponent naložil le, ko bo klicana funkcija handleClick, običajno kot odziv na dejanje uporabnika.

4. Minifikacija in stiskanje

Minifikacija odstrani nepotrebne znake iz vaše kode, kot so presledki, komentarji in neuporabljene spremenljivke. Stiskanje zmanjša velikost vaše kode z uporabo algoritmov, ki iščejo vzorce in jih predstavijo na učinkovitejši način.

Večina sodobnih orodij za gradnjo, kot so Webpack, Parcel in Rollup, vključuje vgrajeno podporo za minifikacijo in stiskanje. Na primer, Webpack uporablja Terser za minifikacijo in ga je mogoče konfigurirati za uporabo Gzip ali Brotli za stiskanje.

Primer (konfiguracija Webpack):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Ta konfiguracija omogoča minifikacijo z uporabo Terserja in stiskanje z uporabo Gzip. Možnost threshold določa najmanjšo velikost (v bajtih), da se datoteka stisne.

5. Optimizacija slik

Slike lahko pogosto pomembno prispevajo k velikosti paketa vaše aplikacije. Optimizacija slik lahko dramatično izboljša zmogljivost.

Tehnike za optimizacijo slik:

6. Premišljena izbira knjižnic

Pazljivo ocenite knjižnice, ki jih uporabljate v svoji aplikaciji. Nekatere knjižnice so lahko precej velike, tudi če uporabljate le majhen del njihove funkcionalnosti. Razmislite o uporabi manjših, bolj osredotočenih knjižnic, ki zagotavljajo samo funkcije, ki jih potrebujete.

Primer:

Namesto uporabe velike knjižnice za oblikovanje datumov, kot je Moment.js, razmislite o uporabi manjše alternative, kot sta date-fns ali Day.js. Te knjižnice so znatno manjše in nudijo podobno funkcionalnost.

Primerjava velikosti paketa:

7. HTTP/2

HTTP/2 je novejša različica protokola HTTP, ki ponuja več izboljšav zmogljivosti v primerjavi s HTTP/1.1, vključno z:

Omogočanje HTTP/2 na vašem strežniku lahko znatno izboljša zmogljivost vaše aplikacije React, zlasti pri obravnavanju velikega števila majhnih datotek. Večina sodobnih spletnih strežnikov in CDN-jev podpira HTTP/2.

8. Predpomnjenje v brskalniku

Predpomnjenje v brskalniku omogoča brskalnikom, da lokalno shranijo statična sredstva (kot so slike, datoteke JavaScript in CSS). Ko uporabnik ponovno obišče vašo aplikacijo, lahko brskalnik pridobi ta sredstva iz predpomnilnika, namesto da bi jih ponovno prenašal, kar znatno skrajša čas nalaganja.

Konfigurirajte svoj strežnik, da nastavi ustrezne glave predpomnilnika za vaša statična sredstva. Glava Cache-Control je najpomembnejša. Omogoča vam, da določite, kako dolgo naj brskalnik predpomni sredstvo.

Primer:

            Cache-Control: public, max-age=31536000

Ta glava brskalniku sporoča, naj sredstvo predpomni za eno leto.

9. Prikazovanje na strani strežnika (SSR)

Prikazovanje na strani strežnika (SSR) vključuje upodabljanje vaših komponent React na strežniku in pošiljanje začetnega HTML-ja odjemalcu. To lahko izboljša začetni čas nalaganja in SEO, saj lahko iskalniki zlahka preberejo vsebino HTML.

Ogrodja, kot sta Next.js in Gatsby, olajšajo implementacijo SSR v vaših aplikacijah React.

Prednosti SSR:

  • Izboljšan začetni čas nalaganja: Brskalnik prejme vnaprej upodobljen HTML, kar mu omogoča hitrejši prikaz vsebine.
  • Boljši SEO: Iskalniki lahko zlahka preberejo vsebino HTML, kar izboljša uvrstitev vaše aplikacije v iskalnikih.
  • Izboljšana uporabniška izkušnja: Uporabniki hitreje vidijo vsebino, kar vodi do bolj privlačne izkušnje.

    • 10. Memoizacija

    Memoizacija je tehnika za predpomnjenje rezultatov dragih klicev funkcij in njihovo ponovno uporabo, ko se pojavijo enaki vhodi. V Reactu lahko uporabite komponento višjega reda React.memo() za memoizacijo funkcionalnih komponent. To preprečuje nepotrebna ponovna upodabljanja, kadar se lastnosti (props) komponente niso spremenile.

    Primer:

                import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Upodobi komponento
  return 
    {props.data}
    ;
});

export default MyComponent;

    V tem primeru se bo MyComponent ponovno upodobil le, če se spremeni lastnost props.data. Komponenti React.memo() lahko posredujete tudi primerjalno funkcijo po meri, če potrebujete večji nadzor nad tem, kdaj naj se komponenta ponovno upodobi.

    Primeri iz prakse in mednarodni vidiki

    Načela zmanjševanja velikosti paketa so univerzalna, vendar se njihova uporaba lahko razlikuje glede na specifičen kontekst vašega projekta in ciljno občinstvo. Tukaj je nekaj primerov:

    Orodja in viri

    Tukaj je nekaj koristnih orodij in virov za zmanjšanje velikosti paketa:

    Zaključek

    Zmanjševanje velikosti paketa je stalen proces, ki zahteva skrbno pozornost do podrobnosti. Z izvajanjem tehnik, opisanih v tem vodniku, lahko znatno izboljšate zmogljivost vaše aplikacije React in zagotovite boljšo uporabniško izkušnjo. Ne pozabite redno analizirati velikosti svojega paketa in iskati področja za optimizacijo. Koristi manjšega paketa – hitrejši časi nalaganja, izboljšana vključenost uporabnikov in boljša splošna izkušnja – so vredne truda.

    Ker se prakse spletnega razvoja nenehno razvijajo, je za gradnjo visoko zmogljivih aplikacij React, ki ustrezajo zahtevam globalnega občinstva, ključnega pomena, da ostanete na tekočem z najnovejšimi tehnikami in orodji za zmanjšanje velikosti paketa.