Bundler — co to je, jaké jsou typy a princip fungování

Co je Bundler?

Bundler (sdružovač modulů) — nástroj příkazového řádku, který na vstupu přijímá vstupní bod (entry point) — hlavní soubor aplikace — a rekurzivně prochází všechny jeho závislosti a vytváří graf modulů. Na výstupu generuje bundler jeden nebo několik souborů, které lze připojit k HTML stránce nebo spustit v mobilní aplikaci.

Proč je bundler potřebný v moderním vývoji

Prohlížeče dlouhou dobu nepodporovaly modulární systém JavaScript na úrovni platformy. Bundler řešil tento problém přeměnou stovek import a require do jediného souboru. Dnes, i s nativní podporou ES modulů v prohlížečích, bundlery plní další úkoly: transpilace JSX a TypeScript, minifikace kódu, code splitting pro líné načítání a hot module replacement (HMR) pro urychlení vývoje.

Při vývoji mobilních aplikací používá React Native Metro jako výchozí bundler a Flutter vlastní systém sestavování založený na Dart. Volba bundleru přímo ovlivňuje rychlost vývoje, velikost aplikace a výkon runtime.

Jak funguje bundleování?

Bundleování prochází několika fázemi: parsování vstupních souborů, vytváření grafu závislostí, transformace modulů a generování výstupních souborů. V každé fázi bundler aplikuje loadery pro transformaci zdrojového kódu a pluginy pro optimalizaci.

Fáze parsování a graf závislostí

Bundler začíná u vstupního bodu, čte soubor a vytváří AST (abstraktní syntaktický strom). Z AST jsou extrahovány všechny příkazy import a require. Pro každý nalezený import bundler opakuje proces rekurzivně, dokud nejsou všechny závislosti shromážděny v jediném grafu.

// Zjednodušená implementace bundleru
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

Po vytvoření grafu bundler aplikuje loadery — transformace, které převádějí soubory do JavaScriptu: TypeScript → JS, SCSS → CSS, JSX → JSX funkce. Poté pluginy provádějí další transformace: minifikace, vkládání obrázků, generování service workeru.

Hlavní typy bundlerů

Bundlery se dělí do tří generací: klasické, specializované a nové generace založené na ES modulech. Každý typ má vlastní architekturu a oblast použití.

Klasické bundlery

Webpack — nejrozšířenější bundler s obrovským ekosystémem. Jeho hlavní výhodou je flexibilita: tisíce loaderů a pluginů pokrývají prakticky každý scénář sestavování. Parcel nabízí přístup zero-config, automaticky určuje potřebné transformace na základě přípon souborů. Oba bundlery podporují code splitting a HMR.

Specializované bundlery

Metro byl vytvořen speciálně pro React Native a funguje pouze s JavaScript a TypeScript. Jeho architektura je optimalizována pro mobilní vývoj: podpora inline requires, asynchronní načítání modulů a integrace s Hermes engine. Rollup je zaměřen na knihovny a npm balíčky, generuje čistý ES modulární výstup bez zbytečného obalu.

Srovnání Webpack, Metro a Vite

Výběr bundleru závisí na platformě a požadavcích projektu. Webpack je univerzální, ale vyžaduje podrobné nastavení. Metro je nenahraditelný pro React Native. Vite poskytuje nejrychlejší vývoj díky nativním ES modulům.

Vite používá esbuild pro předběžné bundleování závislostí a Rollup pro produkční sestavení, což poskytuje 5–10násobné zvýšení rychlosti ve srovnání s Webpackem ve vývojovém režimu. Metro nepodporuje webové cíle, ale poskytuje bezproblémovou integraci s React Native bridge a Turbo Modules.

Nastavení bundleru v projektu

Konfigurace bundleru určuje, jak jsou zpracovávány různé typy souborů, kde je generováno sestavení a jaké optimalizace jsou aplikovány. Typický konfigurační soubor zahrnuje vstupní bod, pravidla pro moduly, pluginy a nastavení výstupu.

Příklad konfigurace Webpack pro React Native webový projekt

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro používá samostatné soubory metro.config.js a babel.config.js pro nastavení. Na rozdíl od Webpacku je konfigurace Metro mnohem jednodušší, protože bundler je specializovaný pro React Native a nevyžaduje nastavení loaderů pro styly nebo obrázky.

Typické chyby při sestavování

I zkušení vývojáři narážejí na chyby bundleování. Duplicate module — jeden z nejčastějších problémů, kdy stejná závislost skončí v bundle několikrát kvůli nekompatibilitě verzí v package.json. Module not found nastává, když je cesta importu nesprávná nebo balíček není nainstalován.

Chyby specifické pro Metro

Metro je omezen velikostí bundle pro mobilní zařízení. Při překročení limitu 2–5 MB se objeví chyba Unable to resolve module kvůli nedostatku paměti na zařízení. Řešení — použijte inline requires a RAM bundles pro líné načítání modulů. Metro je také citlivé na symlinky, proto je pro monorepozitáře vyžadováno dodatečné nastavení watchFolders v konfiguraci.

Pro Webpack je typickým problémem Module parse failed, když má soubor neočekávaný formát nebo chybí potřebný loader. Kontrola přípony souboru a přidání odpovídajícího pravidla do module.rules problém řeší. Použití source-map-explorer pomáhá najít duplicitní moduly a nadbytečné závislosti v konečném bundle.

Optimalizace konfigurace pro urychlení sestavování

Pomalé sestavování — jeden z hlavních problémů při práci s bundlery. Pro urychlení použijte persistent caching, který ukládá výsledky transformace modulů mezi spuštěními. Webpack 5 podporuje mezipaměť souborového systému přes cache: { type: 'filesystem' }, Vite používá esbuild pro předběžné bundleování a Metro se spoléhá na modulární mezipaměť v RAM. Dále nastavte exclude pro node_modules v loaderech, aby se již hotové balíčky nezpracovávaly znovu.

Výběr strategie dělení kódu

Code splitting — rozdělení bundle na části načítané na vyžádání. Různé bundlery implementují tuto strategii svým způsobem. Webpack podporuje dynamický import import(), který vytváří samostatné části pro každý modul. Metro používá inline requires pro odložené načítání. Vite automaticky rozděluje vendor-části a dynamické importy bez další konfigurace. Volba strategie závisí na požadavcích projektu: pro mobilní aplikace jsou preferovány menší počáteční bundly s líným načítáním.

Pro správnou funkci code splitting v React Native je vyžadována dodatečná konfigurace: Metro musí být nakonfigurováno pro práci s asynchronními částmi prostřednictvím inlineRequires. Ve Webpack a Vite funguje code splitting ihned při použití dynamické syntaxe import(), která automaticky vytváří body rozdělení. Pro maximální účinnost kombinujte code splitting s preload nápovědami prostřednictvím <link rel="preload"> pro kritické části.