Stále používáte create-react-app k nastavení svého projektu React? Přepněte na Vite pro lepší výkon a rychlejší vývoj.

Při spouštění nového projektu React se mnoho vývojářů obrací create-react-app jako jejich příkazový nástroj pro nastavení a konfiguraci projektu. Vite je však lepší alternativa. Nabízí rychlejší vývoj a lepší výkon.

Co je Vite?

Vite je nástroj pro sestavení a vývojový server určený ke zlepšení procesu vývoje moderních webových aplikací. Dělá to rozdělením vašich aplikačních modulů na závislosti a zdrojový kód. Závislosti jsou moduly, které se často nemění, zatímco zdrojový kód je obvykle během vývoje často upravován.

Vite používá esbuild, balík založený na Go, který je výrazně rychlejší než tradiční balíky založené na JavaScriptu, aby urychlil proces sestavování zdrojového kódu. Také předbalí závislosti vaší aplikace a poskytuje zdrojový kód přes nativní ESM, umožňující prohlížečům optimalizovat načítání modulů pro efektivnější a rychlejší aplikaci výkon. Když přijde čas na nasazení vaší aplikace do produkce, Vite má vestavěný příkaz k sestavení, který automaticky optimalizuje vaši aplikaci pro nasazení a zajišťuje, že vaše aplikace běží hladce.

Vytvoření projektu Vite

Před vytvořením projektu Vite si uvědomte, že Vite vyžaduje Node.js verze 14.18+ nebo 16+. Chcete-li nainstalovat Node do počítače se systémem Windows nebo Ubuntu, můžete se podívat na tyto články.

  • Jak nainstalovat Node.js na Windows.
  • Učit se jak nainstalovat Npm a Node.js na Ubuntu

Spuštěním tohoto příkazu v terminálu vytvořte projekt Vite.

npm vytvořit vite@latest

Jakmile se příkaz spustí, budete vyzváni k zadání názvu projektu. Zadejte název projektu a klikněte na Enter.

Dále vás Vite vyzve k výběru rámce. Vyberte Reagovat.

Vite vás také požádá o výběr varianty. Vyberte JavaScript.

Když Vite dokončí lešení projektu, přejděte do adresáře, který vytvoří, a nainstalujte závislosti pomocí npm.

instalace npm

Pro spuštění projektu použijte tento příkaz:

npm spustit dev

Toto by měla být domovská stránka.

Můžete začít upravovat svůj projekt a vaše změny se projeví v prohlížeči.

Pro rychlou rychlost vývoje použijte Vite

CRA (create-react-app) je obvykle výchozí nástroj pro nastavení struktury projektu a konfigurace pro aplikaci React. Je to pohodlné, protože vše je nastaveno za vás, ale během vývoje může být pomalé sestavení a opětovné načtení.

Na druhou stranu Vite používá nativní moduly ES v prohlížeči, aby poskytoval rychlejší časy sestavení. Pokud nechcete používat Vite, můžete se rozhodnout pro meta framework React, jako je Next.js, protože je také navržen tak, aby byl vysoce výkonný.