Czym jest tree shaking w JavaScript?

By /

JavaScript

Tree shaking to proces używany w budowaniu aplikacji JavaScript, który pozwala na usunięcie nieużywanego kodu z końcowego pakietu. Jest to technika optymalizacyjna, która pomaga zmniejszyć rozmiar plików wynikowych poprzez eliminację kodu, który nie jest wykorzystywany w czasie wykonania programu. Technika ta stała się szczególnie ważna w kontekście aplikacji webowych, gdzie czas ładowania ma kluczowe znaczenie dla doświadczenia użytkownika. Tree shaking jest często stosowany w narzędziach do budowania aplikacji, takich jak Webpack czy Rollup.

Przykład zastosowania tree shaking

Aby zilustrować, jak działa tree shaking, przygotujemy prosty przykład z wykorzystaniem kodu JavaScript i HTML. Załóżmy, że mamy moduł z kilkoma funkcjami, ale wykorzystujemy tylko jedną z nich w naszej aplikacji.

Kod JavaScript

Załóżmy, że mamy plik mathUtils.js, który eksportuje kilka funkcji matematycznych, ale w naszej aplikacji użyjemy tylko jednej z nich.

// Moduł eksportujący funkcje matematyczne
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    if(b === 0) {
        throw new Error("Division by zero.");
    }
    return a / b;
}
Kod HTML i JavaScript

Teraz utworzymy prostą stronę HTML, która korzysta z funkcji add z naszego modułu mathUtils.js. Użyjemy narzędzia do budowania, takiego jak Webpack, aby zilustrować działanie tree shaking.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Shaking Example</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

W naszym głównym pliku JavaScript (index.js), zaimportujemy i użyjemy tylko funkcji add:

// Import tylko potrzebnej funkcji z modułu mathUtils
import { add } from './mathUtils.js';

// Użycie funkcji add
console.log(add(2, 3));  // Wyświetli 5

Po uruchomieniu narzędzia do budowania z włączonym tree shaking, narzędzie to zidentyfikuje, że tylko funkcja add jest używana i usunie pozostałe funkcje (subtract, multiply, divide) z końcowego pakietu (bundle.js). Dzięki temu rozmiar pliku bundle.js zostanie zredukowany, co przyczyni się do szybszego ładowania strony.

Dlaczego tree shaking jest ważne?

  • Zmniejszenie rozmiaru aplikacji: Usunięcie nieużywanego kodu znacząco redukuje rozmiar plików JavaScript, co przekłada się na szybsze ładowanie aplikacji.
  • Lepsze doświadczenie użytkownika: Szybsze ładowanie strony oznacza lepsze doświadczenia dla użytkownika, szczególnie na urządzeniach mobilnych i przy wolnych połączeniach internetowych.
  • Efektywniejsze wykorzystanie zasobów: Mniejszy rozmiar aplikacji to także oszczędność przepustowości i mniejsze zużycie danych przez użytkowników.

Podsumowanie

Tree shaking to potężna technika optymalizacyjna w ekosystemie JavaScript, która pozwala na efektywne zarządzanie zasobami aplikacji poprzez usunięcie nieużywanego kodu. Jest to kluczowe dla wydajności aplikacji webowych, umożliwiając szybsze ładowanie i lepsze doświadczenia użytkownika.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top