Optimizacija performansi JavaScripta: Podjela koda (Code Splitting) vs. Lijeno izračunavanje (Lazy Evaluation)

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Učitavanje...
}>
        
      
    

U ovom primjeru, OtherComponent se učitava samo kada se renderira. Dok se učitava, korisnik će vidjeti poruku "Učitavanje...".

Alati za podjelu koda

• Webpack: Popularni alat za pakiranje modula koji podržava različite tehnike podjele koda.
• Rollup: Još jedan alat za pakiranje modula koji se fokusira na stvaranje malih, učinkovitih paketa.
• Parcel: Alat za pakiranje bez konfiguracije koji automatski upravlja podjelom koda.
• Vite: Alat za izgradnju koji koristi nativne ES module za brzi razvoj i optimizirane produkcijske verzije.

Lijeno izračunavanje (Lazy Evaluation): Odgađanje izračuna

Što je lijeno izračunavanje?

Lijeno izračunavanje (Lazy evaluation), poznato i kao odgođeno izračunavanje, je programska tehnika gdje se evaluacija izraza odgađa dok njegova vrijednost zaista nije potrebna. Drugim riječima, izračuni se izvode samo kada su njihovi rezultati potrebni, umjesto da se žurno izračunavaju unaprijed.

Zamislite da pripremate obrok s više slijedova. Ne biste kuhali svako jelo odjednom. Umjesto toga, pripremali biste svako jelo tek kada dođe vrijeme za posluživanje. Lijeno izračunavanje radi slično, izvodeći izračune samo kada su njihovi rezultati potrebni.

Kako funkcionira lijeno izračunavanje

U JavaScriptu, lijeno izračunavanje može se implementirati pomoću različitih tehnika:

• Funkcije: Omotavanje izraza u funkciju omogućuje vam da odgodite njegovu evaluaciju dok se funkcija ne pozove.
• Generatori: Generatori pružaju način za stvaranje iteratora koji proizvode vrijednosti na zahtjev.
• Memoizacija: Memoizacija uključuje predmemoriranje rezultata skupih poziva funkcija i vraćanje predmemoriranog rezultata kada se isti ulazni podaci ponovno pojave.
• Proxy objekti: Proxy objekti mogu se koristiti za presretanje pristupa svojstvima i odgađanje izračuna vrijednosti svojstava dok im se zaista ne pristupi.

Prednosti lijenog izračunavanja

• Poboljšane performanse: Odgađanjem nepotrebnih izračuna, lijeno izračunavanje može značajno poboljšati performanse, posebno pri radu s velikim skupovima podataka ili složenim izračunima.
• Smanjena upotreba memorije: Lijeno izračunavanje može smanjiti upotrebu memorije izbjegavanjem stvaranja međuvrijednosti koje nisu odmah potrebne.
• Povećana responzivnost: Izbjegavanjem nepotrebnih izračuna tijekom početnog učitavanja, lijeno izračunavanje može povećati responzivnost aplikacije.
• Beskonačne strukture podataka: Lijeno izračunavanje omogućuje vam rad s beskonačnim strukturama podataka, kao što su beskonačne liste ili tokovi, izračunavajući samo potrebne elemente na zahtjev.

Primjer: Lijeno učitavanje slika (Lazy Loading)

Čest slučaj upotrebe lijenog izračunavanja je lijeno učitavanje slika. Umjesto da se sve slike na stranici učitaju unaprijed, možete odgoditi učitavanje slika koje nisu početno vidljive u prikazu (viewportu). To može značajno poboljšati početno vrijeme učitavanja stranice i smanjiti potrošnju mrežne propusnosti.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Ovaj primjer koristi IntersectionObserver API za otkrivanje kada slika uđe u prikaz. Kada je slika vidljiva, njen src atribut se postavlja na vrijednost njenog data-src atributa, što pokreće učitavanje slike. Promatrač tada prestaje promatrati sliku kako bi spriječio njeno ponovno učitavanje.

Primjer: Memoizacija

Memoizacija se može koristiti za optimizaciju skupih poziva funkcija. Evo primjera:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulacija vremenski zahtjevnog izračuna
  for (let i = 0; i < 100000000; i++) {
    // Učini nešto
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Prvi poziv');
console.log(memoizedCalculation(5)); // Prvi poziv - traje
console.timeEnd('Prvi poziv');

console.time('Drugi poziv');
console.log(memoizedCalculation(5)); // Drugi poziv - trenutno vraća predmemoriranu vrijednost
console.timeEnd('Drugi poziv');

U ovom primjeru, funkcija memoize prima funkciju kao ulaz i vraća memoiziranu verziju te funkcije. Memoizirana funkcija predmemorira rezultate prethodnih poziva, tako da naknadni pozivi s istim argumentima mogu vratiti predmemorirani rezultat bez ponovnog izvršavanja izvorne funkcije.

Podjela koda vs. Lijeno izračunavanje: Ključne razlike

Iako su i podjela koda i lijeno izračunavanje moćne tehnike optimizacije, one se bave različitim aspektima performansi:

• Podjela koda: Fokusira se na smanjenje početne veličine paketa dijeljenjem koda u manje dijelove i njihovim učitavanjem na zahtjev. Primarno se koristi za poboljšanje početnog vremena učitavanja stranice.
• Lijeno izračunavanje: Fokusira se na odgađanje izračuna vrijednosti dok one zaista nisu potrebne. Primarno se koristi za poboljšanje performansi pri radu sa skupim izračunima ili velikim skupovima podataka.

U suštini, podjela koda smanjuje količinu koda koji se mora preuzeti unaprijed, dok lijeno izračunavanje smanjuje količinu izračuna koji se moraju izvršiti unaprijed.

Kada koristiti podjelu koda, a kada lijeno izračunavanje

Podjela koda

• Velike aplikacije: Koristite podjelu koda za aplikacije s velikom količinom JavaScript koda, posebno one s više ruta ili značajki.
• Poboljšanje početnog vremena učitavanja: Koristite podjelu koda za poboljšanje početnog vremena učitavanja stranice i smanjenje vremena do interaktivnosti.
• Smanjenje mrežne propusnosti: Koristite podjelu koda za smanjenje količine podataka koja se mora prenijeti preko mreže.

Lijeno izračunavanje

• Skupi izračuni: Koristite lijeno izračunavanje za funkcije koje obavljaju skupe izračune ili pristupaju velikim skupovima podataka.
• Poboljšanje responzivnosti: Koristite lijeno izračunavanje za poboljšanje responzivnosti aplikacije odgađanjem nepotrebnih izračuna tijekom početnog učitavanja.
• Beskonačne strukture podataka: Koristite lijeno izračunavanje pri radu s beskonačnim strukturama podataka, kao što su beskonačne liste ili tokovi.
• Lijeno učitavanje medija: Implementirajte lijeno učitavanje za slike, videozapise i druge medijske sadržaje kako biste poboljšali vrijeme učitavanja stranice.

Kombiniranje podjele koda i lijenog izračunavanja

U mnogim slučajevima, podjela koda i lijeno izračunavanje mogu se kombinirati kako bi se postigli još veći dobici u performansama. Na primjer, mogli biste koristiti podjelu koda da podijelite svoju aplikaciju na manje dijelove, a zatim koristiti lijeno izračunavanje da odgodite izračun vrijednosti unutar tih dijelova.

Uzmite u obzir e-commerce aplikaciju. Mogli biste koristiti podjelu koda da podijelite aplikaciju na zasebne pakete za stranicu s popisom proizvoda, stranicu s detaljima proizvoda i stranicu za naplatu. Zatim, unutar stranice s detaljima proizvoda, mogli biste koristiti lijeno izračunavanje da odgodite učitavanje slika ili izračun preporuka proizvoda dok zaista ne budu potrebni.

Iznad podjele koda i lijenog izračunavanja: Dodatne tehnike optimizacije

Iako su podjela koda i lijeno izračunavanje moćne tehnike, one su samo dva dijela slagalice kada je u pitanju optimizacija performansi JavaScripta. Evo nekih dodatnih tehnika koje možete koristiti za daljnje poboljšanje performansi:

• Minifikacija: Uklonite nepotrebne znakove (npr. praznine, komentare) iz vašeg koda kako biste smanjili njegovu veličinu.
• Kompresija: Komprimirajte svoj kod pomoću alata kao što su Gzip ili Brotli kako biste dodatno smanjili njegovu veličinu.
• Predmemoriranje (Caching): Iskoristite predmemoriranje preglednika i CDN predmemoriranje kako biste smanjili broj zahtjeva prema vašem poslužitelju.
• Tree Shaking: Uklonite nekorišteni kod iz vaših paketa kako biste smanjili njihovu veličinu.
• Optimizacija slika: Optimizirajte slike komprimiranjem, promjenom veličine na odgovarajuće dimenzije i korištenjem modernih formata slika poput WebP.
• Debouncing i Throttling: Kontrolirajte učestalost izvršavanja rukovatelja događajima (event handlers) kako biste spriječili probleme s performansama.
• Učinkovita manipulacija DOM-om: Minimizirajte manipulacije DOM-om i koristite učinkovite tehnike manipulacije DOM-om.
• Web Workers: Prebacite računalno intenzivne zadatke na web workere kako biste spriječili blokiranje glavne niti (main thread).

Zaključak

Optimizacija performansi JavaScripta ključan je aspekt pružanja pozitivnog korisničkog iskustva i postizanja poslovnih ciljeva. Podjela koda i lijeno izračunavanje su dvije moćne tehnike koje mogu značajno poboljšati performanse smanjenjem početnog vremena učitavanja, smanjenjem potrošnje mrežne propusnosti i odgađanjem nepotrebnih izračuna. Razumijevanjem kako ove tehnike rade i kada ih koristiti, možete stvoriti brže, responzivnije i ugodnije web aplikacije.

Ne zaboravite uzeti u obzir specifične zahtjeve vaše aplikacije i koristiti tehnike koje su najprikladnije za vaše potrebe. Kontinuirano pratite performanse vaše aplikacije i iterirajte na svojim strategijama optimizacije kako biste osigurali da pružate najbolje moguće korisničko iskustvo. Prihvatite moć podjele koda i lijenog izračunavanja kako biste stvorili web aplikacije koje nisu samo bogate značajkama, već su i performantne i ugodne za korištenje, širom svijeta.

Dodatni resursi za učenje

• Webpack dokumentacija: https://webpack.js.org/
• Rollup dokumentacija: https://rollupjs.org/guide/en/
• Vite dokumentacija: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/