Czy nadal używasz aplikacji create-react-app do konfigurowania swojego projektu React? Przełącz się na Vite, aby uzyskać lepszą wydajność i większą szybkość programowania.

Rozpoczynając nowy projekt React, wielu programistów zwraca się do twórz-reaguj-aplikację jako podstawowe narzędzie poleceń do instalacji i konfiguracji projektu. Jednak Vite jest lepszą alternatywą. Oferuje krótszy czas programowania i lepszą wydajność.

Co to jest Vite?

Vite to narzędzie do budowania i serwer programistyczny zaprojektowany w celu usprawnienia procesu tworzenia nowoczesnych aplikacji internetowych. Robi to, dzieląc moduły aplikacji na zależności i kod źródłowy. Zależności to moduły, które nie zmieniają się często, podczas gdy kod źródłowy jest zwykle często edytowany podczas programowania.

Vite używa esbuild, program pakujący oparty na Go, który jest znacznie szybszy niż tradycyjne programy pakujące oparte na JavaScript, aby przyspieszyć proces kompilacji kodu źródłowego. Zawiera również wstępnie zależności aplikacji i udostępnia kod źródłowy za pośrednictwem natywnego ESM, umożliwiając przeglądarkom optymalizację ładowania modułów w celu wydajniejszej i szybszej aplikacji wydajność. Kiedy przychodzi czas na wdrożenie aplikacji do produkcji, Vite ma wbudowane polecenie kompilacji, które automatycznie optymalizuje aplikację do wdrożenia, zapewniając płynne działanie aplikacji.

instagram viewer

Tworzenie projektu Vite

Przed utworzeniem projektu Vite pamiętaj, że Vite wymaga Node.js w wersji 14.18+ lub 16+. Możesz zapoznać się z tymi artykułami, aby zainstalować Node na komputerze z systemem Windows lub Ubuntu.

  • Jak zainstaluj Node.js w systemie Windows.
  • Uczyć się jak zainstalować Npm i Node.js na Ubuntu

Utwórz projekt Vite, uruchamiając to polecenie w terminalu.

npm utwórz vite@latest

Po rozpoczęciu wykonywania polecenia zostaniesz poproszony o podanie nazwy projektu. Wpisz nazwę swojego projektu i kliknij Enter.

Następnie Vite poprosi o wybranie struktury. Wybierz Reaguj.

Vite poprosi Cię również o wybranie wariantu. Wybierz JavaScript.

Kiedy Vite zakończy tworzenie szkieletu projektu, przejdź do utworzonego przez niego katalogu i zainstaluj zależności za pośrednictwem npm.

instalacja npm

Aby uruchomić projekt, użyj tego polecenia:

npm uruchom dev

To powinna być strona główna.

Możesz rozpocząć edycję projektu, a zmiany zostaną odzwierciedlone w przeglądarce.

Użyj Vite, aby uzyskać dużą szybkość programowania

CRA (create-react-app) jest zwykle domyślnym narzędziem do ustawiania struktury projektu i konfiguracji dla aplikacji React. Jest to wygodne, ponieważ wszystko jest skonfigurowane dla Ciebie, ale budowanie i ponowne ładowanie podczas programowania może być powolne.

Z drugiej strony Vite używa natywnych modułów ES w przeglądarce, aby zapewnić szybsze czasy kompilacji. Jeśli nie chcesz używać Vite, możesz wybrać metaframework React, taki jak Next.js, ponieważ jest on również zaprojektowany z myślą o wysokiej wydajności.