Szybkość

Głośność

require(#24) - Trochę o module bundlerach

Pobierz odcinek 💾Odcinek na YouTube 📺Przesłuchaj na Spotify 🎧

Module bundlery to bardzo przydatne narzędzia wchodzące w skład niemalże każdej nowoczesnej strony internetowej. Zazwyczaj znajdują się pod spodem innych narzędzi, ale warto się również przyjrzeć im samym. W tym odcinku rozmawiamy o tym czym są, co mogą dla nas zrobić oraz porównujemy najciekawsze z nich.

Linki i notatki

Czym są module bundlery?

  • Główny cel - łączenie kodu składającego się z wielu modułów
  • Przerabianie jednego kodu w inny kod, kompatybilny z przeglądarką (+ polyfille)
  • Transpilowanie do czystego CSS'a i/lub ładowanie styli (np. SASS, LESS, Stylus)
  • Tłumaczenie kodu z template engine'u (jak np. Pug czy EJS) na HTML
  • Wsparcie dla dodadków do JS'a (np. JSX, Vue, itp.)
  • Wsparcie dla języków kompilowanych do JS'a (np. TypeScript, CoffeeScript)
  • Ładowanie i kompresja obrazków (więcej w odcinku 20)
  • Tree Shaking

Popularne i ciekawe module bundlery

  • Webpack https://webpack.js.org/
    • Najbardziej zaawansowany, najpopularniejszy, najtrudniejszy, uznawany za pewien standard.
  • Parcel https://parceljs.org/
    • "Przeciwieństwo" do webpacka, super prosty. Zero potrzeb konfiguracji, parcel watch index.html.
  • Rollup https://rollupjs.org/
    • Główna konkurencja dla webpacka, łatwiejszy od niego, zrobi generalnie to samo.
  • ESBuild https://esbuild.github.io/
    • Stworzony w Go z myślą o wydajności
    • Skoncentrowany na składni ESM
  • Snowpack https://www.snowpack.dev/
    • Wyróżnia się wydajnością w developmencie
    • Do budowania koncowych bundli może wykorzystywać inne bundlery
    • Tylko ES modules
  • Rome https://rome.tools/
    • Cały toolkit do pisania kodu, brak potrzebnej konfiguracji, wspiera wszystko po wyjęciu z pudełka
    • Całkiem świeży, rozwijany przez Facebooka

Szybkie nowości