Stále používate aplikáciu create-react-app na nastavenie svojho projektu React? Pre lepší výkon a vyššiu rýchlosť vývoja prejdite na Vite.

Pri spustení nového projektu React sa mnohí vývojári obrátia na create-react-app ako ich hlavný príkazový nástroj na nastavenie a konfiguráciu projektu. Vite je však lepšia alternatíva. Ponúka rýchlejšie časy vývoja a lepší výkon.

Čo je Vite?

Vite je nástroj na zostavovanie a vývojový server určený na zlepšenie procesu vývoja moderných webových aplikácií. Robí to tak, že vaše aplikačné moduly rozdelíte na závislosti a zdrojový kód. Závislosti sú moduly, ktoré sa často nemenia, zatiaľ čo zdrojový kód sa počas vývoja zvyčajne často upravuje.

Vite používa esbuild, balík založený na Go, ktorý je výrazne rýchlejší ako tradičné balíky založené na JavaScripte, aby urýchlil proces zostavovania zdrojového kódu. Tiež vopred spája závislosti vašej aplikácie a poskytuje zdrojový kód cez natívny ESM, umožňuje prehliadačom optimalizovať načítanie modulov pre efektívnejšiu a rýchlejšiu aplikáciu výkon. Keď príde čas na nasadenie vašej aplikácie do produkcie, Vite má vstavaný príkaz na zostavenie, ktorý automaticky optimalizuje vašu aplikáciu na nasadenie, čím zaisťuje hladký chod vašej aplikácie.

instagram viewer

Vytvorenie projektu Vite

Pred vytvorením projektu Vite si všimnite, že Vite vyžaduje Node.js verzie 14.18+ alebo 16+. Ak chcete nainštalovať Node do počítača so systémom Windows alebo Ubuntu, môžete si prečítať tieto články.

  • Ako nainštalujte Node.js v systéme Windows.
  • Učte sa ako nainštalovať Npm a Node.js na Ubuntu

Vytvorte projekt Vite spustením tohto príkazu v termináli.

npm vytvoriť vite@latest

Po spustení príkazu sa zobrazí výzva na zadanie názvu projektu. Zadajte názov projektu a kliknite na Enter.

Ďalej vás Vite vyzve na výber rámca. Vyberte možnosť Reagovať.

Vite vás tiež požiada o výber variantu. Vyberte JavaScript.

Keď Vite dokončí lešenie projektu, prejdite do adresára, ktorý vytvorí, a nainštalujte závislosti cez npm.

inštalácia npm

Ak chcete spustiť projekt, použite tento príkaz:

npm spustiť dev

Toto by mala byť domovská stránka.

Môžete začať upravovať svoj projekt a vaše zmeny sa prejavia v prehliadači.

Použite Vite pre rýchly vývoj

CRA (create-react-app) je zvyčajne predvolený nástroj na nastavenie štruktúry projektu a konfigurácie pre aplikáciu React. Je to pohodlné, pretože všetko je nastavené za vás, ale počas vývoja môže byť pomalé zostavovanie a opätovné načítanie.

Na druhej strane Vite používa v prehliadači natívne moduly ES, ktoré poskytujú rýchlejšie časy zostavovania. Ak nechcete používať Vite, môžete sa rozhodnúť pre metarámec React, ako je Next.js, pretože je tiež navrhnutý tak, aby bol vysoko výkonný.