Obsah
Vite
Vite vytvořil Evan You (autor frameworku Vue.js), aby vyřešil frustraci vývojářů z pomalého startu projektů. Zatímco u starších nástrojů trvalo spuštění vývojového serveru u velkých projektů desítky sekund i minuty, Vite startuje téměř okamžitě.
1. Proč je Vite tak rychlý?
Vite využívá dva zásadní technologické posuny:
Nativní ES Moduly (ESM)
Moderní prohlížeče už umí samy zpracovávat importy v JavaScriptu. Vite toho využívá a nebalí (nebundluje) celý kód aplikace před spuštěním. Místo toho prostě „naservíruje“ prohlížeči soubor, který si prohlížeč právě vyžádal.
esbuild pro závislosti
Zatímco váš kód se zpracovává přes ESM, knihovny třetích stran (závislosti), které se nemění tak často, Vite předpřipraví pomocí nástroje esbuild. Ten je napsaný v jazyce Go a je 10–100× rychlejší než nástroje napsané v JavaScriptu.
2. Klíčové vlastnosti
- Okamžitý start serveru: Server je připraven k práci téměř v momentě, kdy stisknete Enter.
- Bleskové HMR (Hot Module Replacement): Když změníte řádek kódu, v prohlížeči se okamžitě projeví změna, aniž by se ztratil stav aplikace nebo se celá stránka musela obnovit.
- Podpora pro moderní technologie: Nativně podporuje TypeScript, JSX, CSS moduly i SFC (Vue) bez nutnosti složitého nastavování.
- Optimalizovaný build: Pro produkci (ostré nasazení) používá prověřený nástroj Rollup, který vygeneruje vysoce optimalizované soubory pro co nejrychlejší načítání webu.
3. Srovnání: Vite vs. Webpack
| Vlastnost | Webpack (Starší generace) | Vite (Nová generace) |
|---|---|---|
| Princip | Bundlování (spojování) všeho předem. | Servírování modulů na vyžádání (ESM). |
| Rychlost startu | Zpomaluje se s velikostí projektu. | Stále stejně rychlý nezávisle na velikosti. |
| Konfigurace | Často velmi složitá (stovky řádků). | Minimalistická, rozumné výchozí hodnoty. |
| Jazyk nástroje | JavaScript | JavaScript + Go (esbuild) |
4. Ekosystém
Vite není vázán pouze na Vue. Stal se univerzálním standardem a dnes je doporučovaným nástrojem pro:
- React: Oficiální šablony pro React nyní využívají Vite místo staršího Create React App.
- Svelte: Framework SvelteKit je postaven přímo nad Vite.
- Vanilla JS: Ideální i pro čistý JavaScript bez frameworků.
5. Jak začít?
Vite se spouští jednoduše z terminálu pomocí příkazu:
npm create vite@latest muj-projekt
Následně si jen vyberete, zda chcete React, Vue nebo jinou technologii, a během vteřiny můžete programovat.
Zajímavost: Vite se stal tak populárním, že se kolem něj vytvořil ekosystém „unplugin“, který umožňuje psát doplňky (pluginy), které fungují současně ve Vite, Webpacku i Rollupu.