Koristite li još uvijek create-react-app za postavljanje svog React projekta? Prijeđite na Vite za bolje performanse i bržu brzinu razvoja.

Kada započinju novi React projekt, mnogi se programeri okreću kreiraj-reagiraj-aplikaciju kao njihov glavni naredbeni alat za postavljanje i konfiguraciju projekta. Međutim, Vite je bolja alternativa. Nudi brže vrijeme razvoja i bolje performanse.

Što je Vite?

Vite je alat za izradu i razvojni poslužitelj dizajniran za poboljšanje procesa razvoja modernih web aplikacija. To čini dijeljenjem modula vaše aplikacije na ovisnosti i izvorni kod. Zavisnosti su moduli koji se ne mijenjaju često, dok se izvorni kod obično često uređuje tijekom razvoja.

Vite koristi esbuild, bundler temeljen na Go-u koji je znatno brži od tradicionalnih bundlera temeljenih na JavaScriptu kako bi se ubrzao proces izgradnje izvornog koda. Također unaprijed spaja ovisnosti vaše aplikacije i poslužuje izvorni kod preko izvornog ESM-a, omogućujući preglednicima da optimiziraju učitavanje modula za učinkovitiju i bržu primjenu izvođenje. Kada dođe vrijeme za implementaciju vaše aplikacije u proizvodnju, Vite ima ugrađenu naredbu za izgradnju koja automatski optimizira vašu aplikaciju za implementaciju, osiguravajući da vaša aplikacija radi glatko.

instagram viewer

Stvaranje Vite projekta

Prije izrade Vite projekta imajte na umu da Vite zahtijeva Node.js verziju 14.18+ ili 16+. Možete pogledati ove članke da biste instalirali Node na svoj Windows ili Ubuntu stroj.

  • Kako da instalirajte Node.js na Windows.
  • Naučiti kako instalirati Npm i Node.js na Ubuntu

Izradite Vite projekt pokretanjem ove naredbe u terminalu.

npm kreiraj vite@najnovije

Nakon što se naredba počne izvršavati, od vas će se tražiti naziv projekta. Upišite naziv svog projekta i kliknite enter.

Zatim će Vite od vas tražiti da odaberete okvir. Odaberite Reagiraj.

Vite će vas također pitati da odaberete varijantu. Odaberite JavaScript.

Kada Vite dovrši izradu skele projekta, krećite se kroz direktorij koji je stvorio i instalirajte ovisnosti putem npm-a.

npm instalirati

Za pokretanje projekta koristite ovu naredbu:

npm run dev

Ovo bi trebala biti početna stranica.

Možete početi uređivati ​​svoj projekt i vaše promjene će se odraziti u pregledniku.

Koristite Vite za brzu brzinu razvoja

CRA (create-react-app) obično je zadani alat za postavljanje strukture projekta i konfiguracije za React aplikaciju. Zgodno je jer je sve postavljeno za vas, ali može biti sporo za izgradnju i ponovno učitavanje tijekom razvoja.

Vite, s druge strane, koristi izvorne ES module u pregledniku kako bi omogućio brže vrijeme izgradnje. Ako ne želite koristiti Vite, možete se odlučiti za React meta framework kao što je Next.js jer je također dizajniran da bude vrlo učinkovit.