M
MLOG
Optimizacija performansi u Reactu: Ovladavanje smanjenjem veličine 'bundlea' | MLOG | MLOG

Svaka ruta u ovom primjeru lijeno učitava (lazily loads) svoju odgovarajuću komponentu, poboljšavajući početno vrijeme učitavanja aplikacije.

2. Tree Shaking

Tree shaking je tehnika koja eliminira "mrtav kod" (dead code) iz vaše aplikacije. Mrtav kod odnosi se na kod koji se nikada ne koristi u vašoj aplikaciji, ali je ipak uključen u 'bundle'. To se često događa kada importirate cijele biblioteke, a koristite samo mali dio njihove funkcionalnosti.

Moderni JavaScript bundleri poput Webpacka i Rollupa mogu automatski izvršiti tree shaking. Kako biste osigurali da tree shaking radi učinkovito, važno je koristiti ES module (sintaksa import i export) umjesto CommonJS (sintaksa require). ES moduli omogućuju bundleru da statički analizira vaš kod i utvrdi koji se izvozi (exports) stvarno koriste.

Primjer:

Recimo da koristite pomoćnu biblioteku lodash. Umjesto importiranja cijele biblioteke:

            import _ from 'lodash';

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

Importirajte samo funkcije koje su vam potrebne:

            import map from 'lodash/map';

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

Ovo osigurava da je samo funkcija map uključena u vaš 'bundle', značajno smanjujući njegovu veličinu.

3. Dinamički 'import'

Slično React.lazy(), dinamički 'import' (koristeći sintaksu import()) omogućuje vam učitavanje modula na zahtjev. To može biti korisno za učitavanje velikih biblioteka ili komponenti koje su potrebne samo u određenim situacijama.

Primjer:

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

U ovom primjeru, MyLargeComponent će se učitati samo kada se pozove funkcija handleClick, obično kao odgovor na korisničku akciju.

4. Minifikacija i kompresija

Minifikacija uklanja nepotrebne znakove iz vašeg koda, kao što su razmaci, komentari i neiskorištene varijable. Kompresija smanjuje veličinu vašeg koda primjenom algoritama koji pronalaze uzorke i predstavljaju ih učinkovitije.

Većina modernih alata za build, poput Webpacka, Parcela i Rollupa, uključuje ugrađenu podršku za minifikaciju i kompresiju. Na primjer, Webpack koristi Terser za minifikaciju i može se konfigurirati za korištenje Gzipa ili Brotlija za kompresiju.

Primjer (Webpack konfiguracija):

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

Ova konfiguracija omogućuje minifikaciju pomoću Tersera i kompresiju pomoću Gzipa. Opcija threshold određuje minimalnu veličinu (u bajtovima) za kompresiju datoteke.

5. Optimizacija slika

Slike često mogu značajno doprinijeti veličini 'bundlea' vaše aplikacije. Optimiziranje slika može dramatično poboljšati performanse.

Tehnike za optimizaciju slika:

6. Mudar odabir biblioteka

Pažljivo procijenite biblioteke koje koristite u svojoj aplikaciji. Neke biblioteke mogu biti prilično velike, čak i ako koristite samo mali dio njihove funkcionalnosti. Razmislite o korištenju manjih, fokusiranijih biblioteka koje pružaju samo značajke koje su vam potrebne.

Primjer:

Umjesto korištenja velike biblioteke za formatiranje datuma poput Moment.js, razmislite o korištenju manje alternative poput date-fns ili Day.js. Ove su biblioteke znatno manje i pružaju sličnu funkcionalnost.

Usporedba veličine 'bundlea':

7. HTTP/2

HTTP/2 je novija verzija HTTP protokola koja nudi nekoliko poboljšanja performansi u odnosu na HTTP/1.1, uključujući:

Omogućavanje HTTP/2 na vašem poslužitelju može značajno poboljšati performanse vaše React aplikacije, posebno kada se radi o mnogo malih datoteka. Većina modernih web poslužitelja i CDN-ova podržava HTTP/2.

8. Predmemoriranje u pregledniku (Browser Caching)

Predmemoriranje u pregledniku omogućuje preglednicima da lokalno pohranjuju statične resurse (poput slika, JavaScript datoteka i CSS datoteka). Kada korisnik ponovno posjeti vašu aplikaciju, preglednik može dohvatiti te resurse iz predmemorije (cache) umjesto da ih ponovno preuzima, značajno smanjujući vrijeme učitavanja.

Konfigurirajte svoj poslužitelj da postavi odgovarajuća zaglavlja za predmemoriju za vaše statične resurse. Zaglavlje Cache-Control je najvažnije. Omogućuje vam da odredite koliko dugo preglednik treba predmemorirati resurs.

Primjer:

            Cache-Control: public, max-age=31536000

Ovo zaglavlje govori pregledniku da predmemorira resurs na godinu dana.

9. Renderiranje na strani poslužitelja (Server-Side Rendering - SSR)

Renderiranje na strani poslužitelja (SSR) uključuje renderiranje vaših React komponenti na poslužitelju i slanje početnog HTML-a klijentu. To može poboljšati početno vrijeme učitavanja i SEO, jer tražilice mogu lako indeksirati HTML sadržaj.

Okviri poput Next.js i Gatsby olakšavaju implementaciju SSR-a u vašim React aplikacijama.

Prednosti SSR-a:

  • Poboljšano početno vrijeme učitavanja: Preglednik prima pred-renderirani HTML, što mu omogućuje brži prikaz sadržaja.
  • Bolji SEO: Tražilice mogu lako indeksirati HTML sadržaj, poboljšavajući rang vaše aplikacije na tražilicama.
  • Poboljšano korisničko iskustvo: Korisnici brže vide sadržaj, što dovodi do angažiranijeg iskustva.

    • 10. Memoizacija

    Memoizacija je tehnika za predmemoriranje rezultata skupih poziva funkcija i njihovo ponovno korištenje kada se pojave isti ulazni podaci. U Reactu možete koristiti komponentu višeg reda React.memo() za memoizaciju funkcijskih komponenti. To sprječava nepotrebna ponovna renderiranja kada se props komponente nisu promijenili.

    Primjer:

                import React from 'react';

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

export default MyComponent;

    U ovom primjeru, MyComponent će se ponovno renderirati samo ako se props.data prop promijeni. Također možete proslijediti prilagođenu funkciju za usporedbu u React.memo() ako trebate više kontrole nad time kada bi se komponenta trebala ponovno renderirati.

    Primjeri iz stvarnog svijeta i međunarodna razmatranja

    Principi smanjenja veličine 'bundlea' su univerzalni, ali njihova primjena može varirati ovisno o specifičnom kontekstu vašeg projekta i ciljanoj publici. Evo nekoliko primjera:

    Alati i resursi

    Ovdje su neki korisni alati i resursi za smanjenje veličine 'bundlea':

    Zaključak

    Smanjenje veličine 'bundlea' je kontinuirani proces koji zahtijeva pažljivu pozornost na detalje. Primjenom tehnika navedenih u ovom vodiču, možete značajno poboljšati performanse svoje React aplikacije i pružiti bolje korisničko iskustvo. Ne zaboravite redovito analizirati veličinu svog 'bundlea' i identificirati područja za optimizaciju. Prednosti manjeg 'bundlea' — brže vrijeme učitavanja, poboljšani angažman korisnika i bolje cjelokupno iskustvo — itekako su vrijedne truda.

    Kako se prakse web razvoja nastavljaju razvijati, ključno je ostati u toku s najnovijim tehnikama i alatima za smanjenje veličine 'bundlea' kako biste gradili React aplikacije visokih performansi koje zadovoljavaju zahtjeve globalne publike.