M
MLOG
Optymalizacja wydajności React: Mistrzostwo w redukcji rozmiaru paczki | MLOG | MLOG

Każda trasa w tym przykładzie ładuje swój odpowiedni komponent leniwie (lazily), co poprawia początkowy czas ładowania aplikacji.

2. Tree Shaking

Tree shaking to technika, która eliminuje martwy kod (dead code) z Twojej aplikacji. Martwy kod to kod, który nigdy nie jest używany w Twojej aplikacji, ale nadal jest zawarty w paczce. Często dzieje się tak, gdy importujesz całe biblioteki, ale używasz tylko niewielkiej części ich funkcjonalności.

Nowoczesne bundlery JavaScript, takie jak Webpack i Rollup, mogą automatycznie przeprowadzać tree shaking. Aby zapewnić, że tree shaking działa skutecznie, ważne jest używanie modułów ES (składnia import i export) zamiast CommonJS (składnia require). Moduły ES pozwalają bundlerowi na statyczną analizę kodu i określenie, które eksporty są faktycznie używane.

Przykład:

Załóżmy, że używasz biblioteki narzędziowej o nazwie lodash. Zamiast importować całą bibliotekę:

            import _ from 'lodash';

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

Zaimportuj tylko te funkcje, których potrzebujesz:

            import map from 'lodash/map';

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

To zapewnia, że tylko funkcja map zostanie dołączona do Twojej paczki, co znacznie zmniejsza jej rozmiar.

3. Dynamiczne importy

Podobnie jak React.lazy(), dynamiczne importy (używając składni import()) pozwalają na ładowanie modułów na żądanie. Może to być przydatne do ładowania dużych bibliotek lub komponentów, które są potrzebne tylko w określonych sytuacjach.

Przykład:

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

W tym przykładzie MyLargeComponent zostanie załadowany tylko wtedy, gdy funkcja handleClick zostanie wywołana, zazwyczaj w odpowiedzi na działanie użytkownika.

4. Minifikacja i kompresja

Minifikacja usuwa niepotrzebne znaki z kodu, takie jak białe znaki, komentarze i nieużywane zmienne. Kompresja zmniejsza rozmiar kodu poprzez zastosowanie algorytmów, które znajdują wzorce i reprezentują je w bardziej wydajny sposób.

Większość nowoczesnych narzędzi do budowania, takich jak Webpack, Parcel i Rollup, zawiera wbudowane wsparcie dla minifikacji i kompresji. Na przykład Webpack używa Tersera do minifikacji i może być skonfigurowany do używania Gzip lub Brotli do kompresji.

Przykład (konfiguracja Webpack):

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

Ta konfiguracja włącza minifikację za pomocą Tersera i kompresję za pomocą Gzip. Opcja threshold określa minimalny rozmiar (w bajtach) pliku, który ma być skompresowany.

5. Optymalizacja obrazów

Obrazy często mogą stanowić znaczący wkład w rozmiar paczki Twojej aplikacji. Optymalizacja obrazów może radykalnie poprawić wydajność.

Techniki optymalizacji obrazów:

6. Wybieraj biblioteki z rozwagą

Ostrożnie oceniaj biblioteki, których używasz w swojej aplikacji. Niektóre biblioteki mogą być dość duże, nawet jeśli używasz tylko niewielkiej części ich funkcjonalności. Rozważ użycie mniejszych, bardziej wyspecjalizowanych bibliotek, które dostarczają tylko potrzebnych Ci funkcji.

Przykład:

Zamiast używać dużej biblioteki do formatowania dat, takiej jak Moment.js, rozważ użycie mniejszej alternatywy, jak date-fns lub Day.js. Te biblioteki są znacznie mniejsze i zapewniają podobną funkcjonalność.

Porównanie rozmiaru paczki:

7. HTTP/2

HTTP/2 to nowsza wersja protokołu HTTP, która oferuje kilka ulepszeń wydajności w porównaniu z HTTP/1.1, w tym:

Włączenie HTTP/2 na serwerze może znacznie poprawić wydajność Twojej aplikacji React, zwłaszcza przy obsłudze wielu małych plików. Większość nowoczesnych serwerów internetowych i sieci CDN obsługuje HTTP/2.

8. Pamięć podręczna przeglądarki (Caching)

Pamięć podręczna przeglądarki (caching) pozwala przeglądarkom na lokalne przechowywanie statycznych zasobów (takich jak obrazy, pliki JavaScript i CSS). Gdy użytkownik ponownie odwiedza Twoją aplikację, przeglądarka może pobrać te zasoby z pamięci podręcznej zamiast pobierać je ponownie, co znacznie skraca czas ładowania.

Skonfiguruj swój serwer tak, aby ustawiał odpowiednie nagłówki pamięci podręcznej dla Twoich statycznych zasobów. Nagłówek Cache-Control jest najważniejszy. Pozwala on określić, jak długo przeglądarka powinna przechowywać zasób w pamięci podręcznej.

Przykład:

            Cache-Control: public, max-age=31536000

Ten nagłówek informuje przeglądarkę, aby przechowywała zasób w pamięci podręcznej przez rok.

9. Renderowanie po stronie serwera (SSR)

Renderowanie po stronie serwera (SSR) polega na renderowaniu komponentów React na serwerze i wysyłaniu początkowego kodu HTML do klienta. Może to poprawić początkowy czas ładowania i SEO, ponieważ wyszukiwarki mogą łatwo indeksować zawartość HTML.

Frameworki takie jak Next.js i Gatsby ułatwiają implementację SSR w aplikacjach React.

Korzyści z SSR:

  • Poprawiony początkowy czas ładowania: Przeglądarka otrzymuje wstępnie wyrenderowany HTML, co pozwala jej szybciej wyświetlić treść.
  • Lepsze SEO: Wyszukiwarki mogą łatwo indeksować zawartość HTML, poprawiając pozycję Twojej aplikacji w wynikach wyszukiwania.
  • Ulepszone doświadczenie użytkownika: Użytkownicy widzą treść szybciej, co prowadzi do bardziej angażującego doświadczenia.

    • 10. Memoizacja

    Memoizacja to technika buforowania wyników kosztownych wywołań funkcji i ponownego ich wykorzystywania, gdy ponownie wystąpią te same dane wejściowe. W React możesz użyć komponentu wyższego rzędu React.memo() do memoizacji komponentów funkcyjnych. Zapobiega to niepotrzebnym ponownym renderowaniom, gdy właściwości (props) komponentu się nie zmieniły.

    Przykład:

                import React from 'react';

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

export default MyComponent;

    W tym przykładzie MyComponent zostanie ponownie wyrenderowany tylko wtedy, gdy zmieni się właściwość props.data. Możesz również dostarczyć niestandardową funkcję porównującą do React.memo(), jeśli potrzebujesz większej kontroli nad tym, kiedy komponent powinien się ponownie renderować.

    Przykłady z życia wzięte i uwarunkowania międzynarodowe

    Zasady redukcji rozmiaru paczki są uniwersalne, ale ich zastosowanie może się różnić w zależności od specyficznego kontekstu Twojego projektu i docelowej publiczności. Oto kilka przykładów:

    Narzędzia i zasoby

    Oto kilka pomocnych narzędzi i zasobów do redukcji rozmiaru paczki:

    Podsumowanie

    Redukcja rozmiaru paczki to ciągły proces, który wymaga starannej dbałości o szczegóły. Wdrażając techniki opisane w tym przewodniku, możesz znacznie poprawić wydajność swojej aplikacji React i zapewnić lepsze doświadczenie użytkownika. Pamiętaj, aby regularnie analizować rozmiar swojej paczki i identyfikować obszary do optymalizacji. Korzyści płynące z mniejszej paczki — szybszy czas ładowania, większe zaangażowanie użytkowników i ogólnie lepsze doświadczenie — są warte wysiłku.

    W miarę ewolucji praktyk tworzenia stron internetowych, bycie na bieżąco z najnowszymi technikami i narzędziami do redukcji rozmiaru paczki jest kluczowe dla budowania wysokowydajnych aplikacji React, które spełniają wymagania globalnej publiczności.