Все още ли използвате create-react-app, за да настроите проекта си React? Преминете към Vite за по-добра производителност и по-бърза скорост на разработка.

Когато стартират нов React проект, много разработчици се обръщат към create-react-app като техен команден инструмент за настройка и конфигуриране на проекти. Vite обаче е по-добра алтернатива. Предлага по-бързо време за разработка и по-добра производителност.

Какво е Vite?

Vite е инструмент за изграждане и сървър за разработка, предназначен да подобри процеса на разработка на съвременни уеб приложения. Той прави това, като разделя модулите на вашето приложение на зависимости и изходен код. Зависимостите са модули, които не се променят често, докато изходният код обикновено се редактира често по време на разработката.

Vite използва esbuild, базиран на Go пакет, който е значително по-бърз от традиционните базирани на JavaScript пакети, за да ускори процеса на изграждане на изходния код. Той също така обединява предварително зависимостите на вашето приложение и обслужва изходния код през естествения ESM, позволявайки на браузърите да оптимизират зареждането на модулите за по-ефективно и по-бързо приложение производителност. Когато дойде време да внедрите приложението си в производство, Vite има вградена команда за изграждане, която автоматично оптимизира приложението ви за внедряване, като гарантира, че приложението ви работи гладко.

instagram viewer

Създаване на Vite проект

Преди да създадете проект на Vite, имайте предвид, че Vite изисква Node.js версия 14.18+ или 16+. Можете да се обърнете към тези статии, за да инсталирате Node на вашето Windows или Ubuntu устройство.

  • Как да инсталирайте Node.js на Windows.
  • Уча как да инсталирате Npm и Node.js на Ubuntu

Създайте проект на Vite, като изпълните тази команда в терминала.

npm създаде vite@latest

След като командата започне да се изпълнява, ще бъдете подканени да въведете име на проекта. Въведете името на вашия проект и щракнете върху Enter.

След това Vite ще ви подкани да изберете рамка. Изберете Реагиране.

Vite също ще ви помоли да изберете вариант. Изберете JavaScript.

Когато Vite завърши скелето на проекта, навигирайте в директорията, която създава, и инсталирайте зависимостите чрез npm.

npm инсталирайте

За да стартирате проекта, използвайте тази команда:

npm стартиране dev

Това трябва да е началната страница.

Можете да започнете да редактирате проекта си и вашите промени ще бъдат отразени в браузъра.

Използвайте Vite за бърза скорост на разработка

CRA (create-react-app) обикновено е инструментът по подразбиране за настройка на структурата на проекта и конфигурацията за React приложение. Удобно е, тъй като всичко е настроено за вас, но може да е бавно за изграждане и презареждане по време на разработката.

Vite, от друга страна, използва собствени ES модули в браузъра, за да осигури по-бързо време за изграждане. Ако не искате да използвате Vite, можете да изберете мета рамка на React като Next.js, тъй като тя също е проектирана да бъде много производителна.