Koji su načini optimizacije za smanjenje obima…

Сжимање података: Коришћење алгоритама компресије (gzip, Brotli) на серверу пре слања података клијенту.
Минификација и обфускација: Уклањање вишка симбола (размаци, преломи редова) и преименовање променљивих у JS, CSS, HTML фајловима током изградње пројекта.
Ленијско учитавање (Lazy Loading): Учитавање ресурса (слика, компоненти, модула) само када су потребни, а не при првом учитавању странице.
Уклањање неиспотребног кода (Tree Shaking): Инструменти за изградњу (Webpack, Rollup) могу анализирати зависности и искључити из резултујућег бандла неиспотребни код.
Оптимизација слика:
- Коришћење савремених формата (WebP, AVIF).
- Компресија са губицима или без губитака.
- Адаптивне слике (<picture> или srcset).
- Ленијско учитавање слика (loading="lazy").
Кеширање:
- Кеширање на страни прегледача (HTTP заглавља кеширања).
- Кеширање података API на фронтенду (нпр. помоћу библиотека за управљање стањем).
Пагинација и бесконачно скроловање: Учитавање података у деловима уместо целокупног скупа података.
GraphQL уместо REST: Омогућава клијенту да тражи само она поља која му треба, избегавајући вишак података.
Формат података: Коришћење компактнијих формата за размену података, као што су Protocol Buffers или MessagePack, уместо XML или вишеструког JSON.
Смањење броја HTTP захтева: Уједињење фајлова (CSS, JS), коришћење CSS спрајтова.
Серверски рендеринг (SSR) / Генерација статичких сајтова (SSG): Смањење обима JS потребног за прво приказивање, захваљујући рендерингу на серверу.
Сжатие захтева (Request Compression): Ретко се користи, али је могуће компримовати тело POST захтева.

// Пример ленивог учитавања компоненти у React-у помоћу React.lazy и Suspense
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Учитавање...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Пример адаптивне слике -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Опис слике">
</picture>

Koji su načini optimizacije za smanjenje obima podataka koji se prenose između frontenda i servera?