====== Vite ======

**Vite** vytvořil Evan You (autor frameworku [[it_encyklopedie:vue|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 [[it_encyklopedie:sfc|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:
<code>
npm create vite@latest muj-projekt
</code>
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.

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]