41. Co to jest 'tree shaking' w kontekście Webpack i jak działa?

Tree shaking w kontekście Webpack to technika eliminowania nieużywanego kodu z finalnego bundla, co pozwala na zmniejszenie jego rozmiaru. Tree shaking jest możliwe dzięki statycznej analizie importów i eksportów w kodzie.

Jak działa tree shaking:

1. Moduły ES6: Tree shaking działa najlepiej z modułami ES6 (import/export) ze względu na ich statyczną strukturę.
2. Statyczna analiza: Webpack analizuje kod źródłowy i identyfikuje nieużywane eksporty, które mogą być usunięte.
3. UglifyJS/Terser: Używane do minifikacji i dalszego usuwania nieużywanego kodu.

Konfiguracja Webpack dla tree shaking:

1. Ustawienie trybu produkcyjnego:

module.exports = {
  mode: 'production',
  // inne ustawienia
};

2. Używanie modułów ES6:

// Zamiast `require`
import { myFunction } from './myModule';

Przykład konfiguracji Webpack z TerserPlugin:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  }
};

Tree shaking jest kluczowym elementem optymalizacji rozmiaru bundla, pozwalającym na dostarczanie szybszych i bardziej efektywnych aplikacji.