Kādi ir optimizācijas veidi, lai samazinātu starp frontend un serveri pārsūtīto datu apjomu?

• Datu saspiešana: Izmantot saspiešanas algoritmus (gzip, Brotli) serverī pirms datu sūtīšanas klientam.

• Minifikācija un obfuskācija: Noņemt liekus simbolus (tukšumus, rindu pārtraukumus) un pārsaukt mainīgos JS, CSS, HTML failos projekta būvniecības laikā.

• Vēlās ielādes (Lazy Loading): Ielādēt resursus (attēlus, komponentes, moduļus) tikai tad, kad tie ir nepieciešami, nevis sākotnējā ielādē.

• Nepieciešamā koda izņemšana (Tree Shaking): Būvniecības rīki (Webpack, Rollup) var analizēt atkarības un izslēgt no galīgā bundļa neizmantoto kodu.

• Attēlu optimizācija:

  • Izmantot mūsdienu formātus (WebP, AVIF).
  • Kompresija ar zaudējumiem vai bez.
  • Adaptīvi attēli (<picture> vai srcset).
  • Vēlās ielādes attēli (loading="lazy").

• Kešatmiņa:

  • Kešatmiņa pārlūkprogrammas pusē (HTTP kešatmiņas galvenes).
  • API datu kešatmiņa (piemēram, ar stāvokļa pārvaldības bibliotēkām).

• Lapas sadalīšana un bezgalīgs ritinājums: Datu ielāde pa daļām, nevis visa datu kopuma ielāde.

• GraphQL vietā REST: Atļauj klientam pieprasīt tikai nepieciešamos laukus, izvairoties no liekiem datiem.

• Datu formāts: Izmantot kompakti formātus, piemēram, Protocol Buffers vai MessagePack, vietā XML vai JSON.

• HTTP pieprasījumu skaita samazināšana: Apvienot failus (CSS, JS), izmantot CSS spraitus.

• Servera puses renderēšana (SSR) / Statisko vietņu ģenerēšana (SSG): Samazināt JS apjomu, kas nepieciešams sākotnējai attēlošanai, izmantojot servera renderēšanu.

• Pieprasījumu saspiešana (Request Compression): Retāk lietota, bet iespējams saspiežot POST pieprasījumu ķermeni.

// React piemērs ar React.lazy un Suspense lēnai ielādei
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Notiek ielāde...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Adaptīvs attēla piemērs -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Apraksts">
</picture>