Vite podává zdrojový kód přes nativní ES moduly a bundluje ho až pro produkci

Vite je nástroj, který stojí mezi vývojářem a prohlížečem: v jednom režimu obsluhuje kód, na kterém se právě pracuje, ve druhém z něj skládá balík pro nasazení. Ty dva režimy fungují každý jinak a právě v tom je jádro toho, proč je Vite rychlý. Vývojový server se rozjede skoro okamžitě i u velké aplikace, produkční build projde celý kód a zoptimalizuje ho. Následující řádky popisují, jak obojí funguje a kde jsou meze.

Vývojový server nad nativními ES moduly

Starší nástroje – bundlery jako webpack – musely před prvním zobrazením stránky projít celou aplikaci a slepit ji do jednoho souboru. Čím větší projekt, tím delší čekání. Vite tuhle práci rozdělí. Zdrojový kód aplikace, který se mění často, podává prohlížeči přes nativní ES moduly (ESM). Prohlížeč si o každý modul řekne sám ve chvíli, kdy ho potřebuje, a Vite ho v tu chvíli přepíše do podoby, které prohlížeč rozumí. Načte se jen to, co je pro aktuální stránku nutné, takže start serveru je takřka okamžitý bez ohledu na velikost projektu.

Výjimkou jsou knihovny z node_modules. Bývají jich stovky a nativní ESM neumí importy typu import { x } from 'knihovna' bez cesty k souboru. Vite je proto jednou předzpracuje (pre-bundling): převede starší formáty CommonJS a UMD na ESM a přepíše importy na platné adresy. Ve Vite 8 tohle dělá Rolldown, bundler psaný v Rustu; podle dokumentace je díky němu studený start výrazně rychlejší než u bundleru psaného v JavaScriptu. Výsledek se drží v mezipaměti, takže se předzpracování při dalších startech přeskočí.

HMR: výměna jednoho modulu za běhu

Když se soubor uloží, Vite nezahodí celou stránku. Přes rozhraní HMR (Hot Module Replacement, výměna modulů za běhu) vymění v prohlížeči jen ten modul, který se změnil, a nechá aplikaci ve stavu, v jakém byla – rozepsaný formulář zůstane vyplněný, otevřený panel otevřený. HMR jede taky přes nativní ESM. Frameworky se na něj napojují: Vite má vestavěnou podporu pro Vue single file components a pro React Fast Refresh. Aktualizace se podle dokumentace projeví v prohlížeči do 50 ms.

Produkční build: z modulů jeden balík

Pro nasazení se přístup obrací. Poslat do prohlížeče stovky samostatných souborů přes ESM by na produkci znamenalo stovky požadavků, takže tady Vite naopak bundluje. Build projde závislosti, vyhodí nepoužitý kód (tree-shaking), rozdělí výstup na části (code splitting), zmenší ho (minifikace) a do názvů souborů přidá otisk kvůli cachování.

Historicky na to Vite používal dva různé nástroje: esbuild pro rychlý překlad ve vývoji a Rollup pro důkladnou optimalizaci v produkci. Dvě odlišné pipeline ale znamenaly drobné rozdíly v chování a dvojí systém pluginů. Vite 8 je proto sjednotil do jednoho bundleru, Rolldownu. Ten je psaný v Rustu, k parsování a minifikaci používá Oxc a zůstává kompatibilní se stejným rozhraním pluginů, na které byl ekosystém Rollupu zvyklý. Nastavení buildu se ladí přes build.rolldownOptions.

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rolldownOptions: {
      input: {
        main: 'index.html',
        admin: 'admin.html',
      },
    },
  },
})

TypeScript: přepis bez kontroly typů

Soubory .ts umí Vite importovat rovnou, bez další konfigurace. Důležité je vědět, co přitom dělá a co ne: typy jen odstraní, nekontroluje je. Přepis (transpilaci) obstará Oxc, což je řádově rychlejší než klasický tsc – ale typová kontrola se přeskočí.

Není to nedodělek, ale záměr. Přepis běží po jednotlivých souborech a sedí na model, kdy se každý soubor zpracuje ve chvíli, kdy si o něj prohlížeč řekne. Kontrola typů oproti tomu potřebuje znát celý graf modulů; nacpat ji do téhle pipeline by srazilo rychlost, kvůli které Vite existuje. Typy se proto hlídají zvlášť – při buildu příkazem tsc --noEmit, během vývoje v editoru nebo přes tsc --noEmit --watch v samostatném procesu.

Protože Oxc přepisuje soubor bez znalosti typů z ostatních souborů, dokumentace doporučuje zapnout v tsconfig.json volbu isolatedModules a u importů, které slouží jen pro typy, používat import type.

// tsconfig.json: "isolatedModules": true

import type { User } from './types'

export type { User }

SCSS a další preprocesory

Vite zpracuje .scss, .sass, .less i .styl bez zvláštního pluginu – stačí doinstalovat samotný preprocesor. Pro Sass a SCSS je to jeden balíček:

npm add -D sass-embedded

Dokumentace zároveň u nových projektů doporučuje spíš nativní CSS proměnné a PostCSS než plný preprocesor; vestavěné SCSS je tu hlavně pro projekty, které ho už mají. Přípona .module.scss spojí preprocesor s CSS moduly.

Entry pointy a konfigurace

Vstupním bodem Vite není soubor s JavaScriptem, ale index.html. Vite v něm najde značky <script type="module"> a <link> a odtud sleduje, co všechno do aplikace patří. Víc stránek znamená víc HTML souborů zapsaných do pole input v konfiguraci (viz ukázka výše).

Celé se to ovládá třemi skripty v package.json, které do projektu vloží už zakládací nástroj:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

dev spustí vývojový server s HMR, build vyrobí produkční balík a preview ten hotový balík lokálně naservíruje ke kontrole, než se nasadí. Konfigurace přitom bývá pár řádků: u běžného projektu si Vite vystačí s výchozími hodnotami a do vite.config.ts se sahá jen kvůli pluginům, více vstupům nebo úpravě buildu.

Za rychlostí Vite tedy nestojí jeden trik, ale rozdělení práce – ve vývoji se nebundluje skoro nic a kód jde do prohlížeče tak, jak je, kdežto při buildu se bundluje naplno. Že je to rychlejší než starší celobundlové nástroje, ovšem stojí zatím hlavně na číslech z dokumentace samotného Vite; nezávislé měření tenhle text nepřebírá.

Zdroje

• Dokumentace Vite – Features: z ní text bere předzpracování závislostí Rolldownem, chování TypeScriptu (jen přepis, ne kontrola typů), podporu preprocesorů a skripty v package.json.
• Dokumentace Vite – Why Vite: odtud pochází historie dvojice esbuild a Rollup a jejich sjednocení do Rolldownu ve Vite 8.
• MDN – JavaScript modules: standard nativních ES modulů, na kterých vývojový server stojí.