M
MLOG
Optimalizácia výkonu v Reacte: Zvládnutie zmenšovania veľkosti balíka | MLOG | MLOG

Každá cesta v tomto príklade načíta svoj zodpovedajúci komponent lenivo (lazily), čo zlepšuje počiatočný čas načítania aplikácie.

2. Tree Shaking

Tree shaking je technika, ktorá eliminuje mŕtvy kód z vašej aplikácie. Mŕtvy kód je kód, ktorý sa vo vašej aplikácii nikdy nepoužije, ale stále je zahrnutý v balíku. Často sa to stáva, keď importujete celé knižnice, ale používate len malú časť ich funkcionality.

Moderné JavaScript bundlery ako Webpack a Rollup dokážu automaticky vykonávať tree shaking. Aby ste zabezpečili, že tree shaking funguje efektívne, je dôležité používať ES moduly (syntax import a export) namiesto CommonJS (syntax require). ES moduly umožňujú bundleru staticky analyzovať váš kód a určiť, ktoré exporty sú skutočne použité.

Príklad:

Povedzme, že používate knižnicu utilít s názvom lodash. Namiesto importovania celej knižnice:

            import _ from 'lodash';

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

Importujte iba funkcie, ktoré potrebujete:

            import map from 'lodash/map';

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

Tým sa zabezpečí, že do vášho balíka bude zahrnutá iba funkcia map, čo výrazne zníži jeho veľkosť.

3. Dynamické importy

Podobne ako React.lazy(), dynamické importy (s použitím syntaxe import()) vám umožňujú načítať moduly na požiadanie. To môže byť užitočné na načítanie veľkých knižníc alebo komponentov, ktoré sú potrebné iba v špecifických situáciách.

Príklad:

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

V tomto príklade bude MyLargeComponent načítaný iba vtedy, keď sa zavolá funkcia handleClick, zvyčajne v reakcii na akciu používateľa.

4. Minifikácia a kompresia

Minifikácia odstraňuje z vášho kódu nepotrebné znaky, ako sú medzery, komentáre a nepoužité premenné. Kompresia zmenšuje veľkosť vášho kódu aplikovaním algoritmov, ktoré nachádzajú vzory a efektívnejšie ich reprezentujú.

Väčšina moderných nástrojov na buildovanie, ako Webpack, Parcel a Rollup, obsahuje vstavanú podporu pre minifikáciu a kompresiu. Napríklad Webpack používa Terser na minifikáciu a môže byť nakonfigurovaný na použitie Gzip alebo Brotli na kompresiu.

Príklad (konfigurácia Webpacku):

            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,
    }),
  ],
};

Táto konfigurácia povoľuje minifikáciu pomocou Terser a kompresiu pomocou Gzip. Možnosť threshold špecifikuje minimálnu veľkosť (v bajtoch), ktorú musí súbor mať, aby bol komprimovaný.

5. Optimalizácia obrázkov

Obrázky môžu často významne prispievať k veľkosti balíka vašej aplikácie. Optimalizácia obrázkov môže dramaticky zlepšiť výkon.

Techniky optimalizácie obrázkov:

6. Rozumne si vyberajte knižnice

Dôkladne zhodnoťte knižnice, ktoré používate vo svojej aplikácii. Niektoré knižnice môžu byť dosť veľké, aj keď používate len malú časť ich funkcionality. Zvážte použitie menších, cielenejších knižníc, ktoré poskytujú iba funkcie, ktoré potrebujete.

Príklad:

Namiesto použitia veľkej knižnice na formátovanie dátumu ako Moment.js zvážte použitie menšej alternatívy ako date-fns alebo Day.js. Tieto knižnice sú výrazne menšie a poskytujú podobnú funkcionalitu.

Porovnanie veľkosti balíkov:

7. HTTP/2

HTTP/2 je novšia verzia HTTP protokolu, ktorá ponúka niekoľko vylepšení výkonu oproti HTTP/1.1, vrátane:

Povolenie HTTP/2 na vašom serveri môže výrazne zlepšiť výkon vašej React aplikácie, najmä pri práci s mnohými malými súbormi. Väčšina moderných webových serverov a CDN podporuje HTTP/2.

8. Ukladanie do vyrovnávacej pamäte prehliadača (Caching)

Ukladanie do vyrovnávacej pamäte prehliadača umožňuje prehliadačom lokálne ukladať statické zdroje (ako obrázky, JavaScriptové súbory a CSS súbory). Keď používateľ opätovne navštívi vašu aplikáciu, prehliadač môže tieto zdroje získať z vyrovnávacej pamäte namiesto ich opätovného sťahovania, čo výrazne skracuje časy načítania.

Nakonfigurujte svoj server tak, aby nastavil vhodné hlavičky pre ukladanie do vyrovnávacej pamäte pre vaše statické zdroje. Hlavička Cache-Control je najdôležitejšia. Umožňuje vám špecifikovať, ako dlho má prehliadač ukladať zdroj do vyrovnávacej pamäte.

Príklad:

            Cache-Control: public, max-age=31536000

Táto hlavička hovorí prehliadaču, aby ukladal zdroj do vyrovnávacej pamäte po dobu jedného roka.

9. Vykresľovanie na strane servera (SSR)

Vykresľovanie na strane servera (SSR) zahŕňa vykresľovanie vašich React komponentov na serveri a odosielanie počiatočného HTML klientovi. To môže zlepšiť počiatočný čas načítania a SEO, keďže vyhľadávače môžu ľahko prehľadávať HTML obsah.

Frameworky ako Next.js a Gatsby uľahčujú implementáciu SSR vo vašich React aplikáciách.

Výhody SSR:

  • Zlepšený čas počiatočného načítania: Prehliadač dostane vopred vykreslené HTML, čo mu umožňuje rýchlejšie zobraziť obsah.
  • Lepšie SEO: Vyhľadávače môžu ľahko prehľadávať HTML obsah, čo zlepšuje pozíciu vašej aplikácie vo vyhľadávaní.
  • Zlepšená používateľská skúsenosť: Používatelia vidia obsah rýchlejšie, čo vedie k pútavejšiemu zážitku.

    • 10. Memoizácia

    Memoizácia je technika ukladania výsledkov výpočtovo náročných volaní funkcií do vyrovnávacej pamäte a ich opätovné použitie, keď sa vyskytnú rovnaké vstupy. V Reacte môžete použiť komponent vyššieho rádu React.memo() na memoizáciu funkcionálnych komponentov. To zabraňuje zbytočným prekresleniam, keď sa props komponentu nezmenili.

    Príklad:

                import React from 'react';

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

export default MyComponent;

    V tomto príklade sa MyComponent prekreslí iba vtedy, ak sa zmení jeho vlastnosť (prop) props.data. Môžete tiež poskytnúť vlastnú porovnávaciu funkciu pre React.memo(), ak potrebujete väčšiu kontrolu nad tým, kedy sa má komponent prekresliť.

    Príklady z reálneho sveta a medzinárodné aspekty

    Princípy zmenšovania veľkosti balíka sú univerzálne, ale ich aplikácia sa môže líšiť v závislosti od špecifického kontextu vášho projektu a cieľového publika. Tu je niekoľko príkladov:

    Nástroje a zdroje

    Tu je niekoľko užitočných nástrojov a zdrojov na zmenšenie veľkosti balíka:

    Záver

    Zmenšovanie veľkosti balíka je nepretržitý proces, ktorý si vyžaduje dôkladnú pozornosť venovanú detailom. Implementáciou techník uvedených v tomto sprievodcovi môžete výrazne zlepšiť výkon vašej React aplikácie a poskytnúť lepšiu používateľskú skúsenosť. Nezabudnite pravidelne analyzovať veľkosť vášho balíka a identifikovať oblasti na optimalizáciu. Výhody menšieho balíka – rýchlejšie časy načítania, zlepšené zapojenie používateľov a celkovo lepšia skúsenosť – stoja za tú námahu.

    Keďže sa postupy webového vývoja neustále vyvíjajú, je pre budovanie vysoko výkonných React aplikácií, ktoré spĺňajú požiadavky globálneho publika, kľúčové byť v obraze s najnovšími technikami a nástrojmi na zmenšovanie veľkosti balíka.