Továbbra is használja a create-react-appot a React projekt beállításához? Váltson Vite-ra a jobb teljesítmény és a gyorsabb fejlesztés érdekében.

Egy új React projekt elindításakor sok fejlesztő fordul hozzá Alkalmazás létrehozása-reagálása mint a projekt beállításához és konfigurálásához szükséges parancseszköz. A Vite azonban jobb alternatíva. Gyorsabb fejlesztési időt és jobb teljesítményt kínál.

Mi az a Vite?

A Vite egy összeállítási eszköz és fejlesztőszerver, amelyet a modern webalkalmazások fejlesztési folyamatának javítására terveztek. Ezt úgy teszi, hogy az alkalmazásmodulokat függőségekre és forráskódokra osztja. A függőségek olyan modulok, amelyek nem változnak gyakran, míg a forráskódot jellemzően gyakran szerkesztik a fejlesztés során.

Vite használ esbuild, egy Go-alapú kötegelő, amely lényegesen gyorsabb, mint a hagyományos JavaScript-alapú kötegelők, hogy felgyorsítsa a forráskód összeállítási folyamatát. Ezenkívül előre összecsomagolja az alkalmazás függőségeit, és a forráskódot a natív ESM-en keresztül szolgálja ki, lehetővé teszi a böngészők számára, hogy optimalizálják a modulok betöltését a hatékonyabb és gyorsabb alkalmazás érdekében teljesítmény. Amikor elérkezik az alkalmazás éles üzembe helyezésének ideje, a Vite beépített build paranccsal rendelkezik, amely automatikusan optimalizálja az alkalmazást a telepítéshez, így biztosítva az alkalmazás zökkenőmentes működését.

instagram viewer

Vite projekt létrehozása

Mielőtt létrehozna egy Vite-projektet, vegye figyelembe, hogy a Vite-hoz a Node.js 14.18-as vagy újabb verziója szükséges. Ezekben a cikkekben olvashat a Node telepítéséről Windows vagy Ubuntu gépére.

  • Hogyan kell telepítse a Node.js-t Windows rendszeren.
  • Tanul az Npm és a Node.js telepítése az Ubuntun

Hozzon létre egy Vite-projektet a parancs futtatásával a terminálban.

npm létrehozása vite@latest

Amint a parancs végrehajtása megkezdődik, a rendszer kérni fogja a projekt nevét. Írja be a projekt nevét, és kattintson az Enter gombra.

Ezután a Vite felkéri a keret kiválasztására. Válassza a Reagálás lehetőséget.

A Vite egy változat kiválasztására is kérni fogja. Válassza a JavaScriptet.

Amikor a Vite befejezi a projekt állványozását, navigáljon az általa létrehozott könyvtárban, és telepítse a függőségeket az npm segítségével.

npm telepítés

A projekt futtatásához használja ezt a parancsot:

npm futás dev

Ez legyen a kezdőlap.

Elkezdheti szerkeszteni a projektet, és a módosítások megjelennek a böngészőben.

Használja a Vite-ot a gyors fejlődés érdekében

A CRA (create-react-app) általában az alapértelmezett eszköz a React alkalmazás projektszerkezetének és konfigurációjának beállításához. Kényelmes, mivel minden be van állítva az Ön számára, de a fejlesztés során lassú lehet a felépítése és újratöltése.

A Vite viszont natív ES-modulokat használ a böngészőben, hogy gyorsabb összeállítási időt biztosítson. Ha nem szeretné használni a Vite-ot, választhat egy React meta-keretrendszert, például a Next.js-t, mivel azt is nagy teljesítményűre tervezték.