Care sunt metodele de optimizare pentru reducerea…

Comprimarea datelor: Utilizarea algoritmilor de comprimare (gzip, Brotli) pe server înainte de a trimite datele către client.
Minificare și obfuscation: Eliminarea caracterelor inutile (spații, salturi de linie) și redenumirea variabilelor în fișierele JS, CSS, HTML în timpul construcției proiectului.
Încărcare întârziată (Lazy Loading): Încărcarea resurselor (imagini, componente, module) doar atunci când sunt necesare, nu la încărcarea inițială a paginii.
Tree Shaking (eliminarea codului neutilizat): Instrumentele de construire (Webpack, Rollup) pot analiza dependențele și exclude din pachetul final codul neutilizat.
Optimizarea imaginilor:
- Utilizarea formatelor moderne (WebP, AVIF).
- Compresie cu pierderi sau fără pierderi.
- Imagini responsive (<picture> sau srcset).
- Încărcare întârziată a imaginilor (loading="lazy").
Cache:
- Cache pe partea browser-ului (anteturi de cache HTTP).
- Cache pentru date API pe frontend (de exemplu, cu biblioteci de gestionare a stării).
Paginare și derulare infinită: Încărcarea datelor în porțiuni în loc de întreaga colecție.
GraphQL în loc de REST: Permite clientului să solicite doar câmpurile de care are nevoie, evitând datele redundante.
Formatul datelor: Utilizarea formatelor mai compacte pentru schimbul de date, cum ar fi Protocol Buffers sau MessagePack, în loc de XML sau JSON redundant.
Reducerea numărului de solicitări HTTP: Combinarea fișierelor (CSS, JS), utilizarea sprite-urilor CSS.
Renderizarea pe partea serverului (SSR) / Generarea site-urilor statice (SSG): Reducerea volumului de JS necesar pentru afișarea inițială prin renderizare pe server.
Compresia solicitărilor (Request Compression): Rar utilizată, dar posibilă comprimarea corpului solicitărilor POST.

// Exemplu de încărcare întârziată a unui component în React folosind React.lazy și Suspense
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Se încarcă...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Exemplu de imagine adaptivă -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descrierea imaginii">
</picture>

Care sunt metodele de optimizare pentru reducerea volumului de date transmise între frontend și server?