Verwenden Sie immer noch create-react-app, um Ihr React-Projekt einzurichten? Wechseln Sie zu Vite für bessere Leistung und schnellere Entwicklungsgeschwindigkeit.

Beim Start eines neuen React-Projekts wenden sich viele Entwickler an Erstellen-Reagieren-App als ihr bevorzugtes Befehlstool für die Einrichtung und Konfiguration von Projekten. Vite ist jedoch eine bessere Alternative. Es bietet schnellere Entwicklungszeiten und eine bessere Leistung.

Was ist Vite?

Vite ist ein Build-Tool und Entwicklungsserver, der entwickelt wurde, um den Entwicklungsprozess moderner Webanwendungen zu verbessern. Dazu werden Ihre Anwendungsmodule in Abhängigkeiten und Quellcode unterteilt. Abhängigkeiten sind Module, die sich nicht oft ändern, während der Quellcode normalerweise während der Entwicklung häufig bearbeitet wird.

Vite verwendet bauen, ein Go-basierter Bundler, der erheblich schneller ist als herkömmliche JavaScript-basierte Bundler, um den Erstellungsprozess für den Quellcode zu beschleunigen. Es bündelt auch die Abhängigkeiten Ihrer Anwendung vorab und stellt den Quellcode über natives ESM bereit. ermöglicht es Browsern, das Laden von Modulen für eine effizientere und schnellere Anwendung zu optimieren Leistung. Wenn es an der Zeit ist, Ihre Anwendung für die Produktion bereitzustellen, verfügt Vite über einen integrierten Build-Befehl, der Ihre Anwendung automatisch für die Bereitstellung optimiert und sicherstellt, dass Ihre Anwendung reibungslos läuft.

instagram viewer

Erstellen eines Vite-Projekts

Beachten Sie vor dem Erstellen eines Vite-Projekts, dass Vite die Node.js-Version 14.18+ oder 16+ erfordert. Sie können sich auf diese Artikel beziehen, um Node auf Ihrem Windows- oder Ubuntu-Computer zu installieren.

  • Wie man Installieren Sie Node.js unter Windows.
  • Lernen wie man Npm und Node.js auf Ubuntu installiert

Erstellen Sie ein Vite-Projekt, indem Sie diesen Befehl im Terminal ausführen.

npm erstellt vite@latest

Sobald der Befehl ausgeführt wird, werden Sie zur Eingabe eines Projektnamens aufgefordert. Geben Sie den Namen Ihres Projekts ein und klicken Sie auf die Eingabetaste.

Als nächstes fordert Vite Sie auf, ein Framework auszuwählen. Wählen Sie Reagieren aus.

Vite fordert Sie außerdem auf, eine Variante auszuwählen. Wählen Sie JavaScript aus.

Wenn Vite das Gerüst des Projekts abgeschlossen hat, navigieren Sie durch das erstellte Verzeichnis und installieren Sie die Abhängigkeiten über npm.

npm installieren

Verwenden Sie zum Ausführen des Projekts diesen Befehl:

npm laufen dev

Dies sollte die Startseite sein.

Sie können mit der Bearbeitung Ihres Projekts beginnen und Ihre Änderungen werden im Browser angezeigt.

Verwenden Sie Vite für schnelle Entwicklungsgeschwindigkeit

CRA (create-react-app) ist normalerweise das Standardwerkzeug zum Einrichten der Projektstruktur und -konfiguration für eine React-Anwendung. Es ist bequem, da alles für Sie eingerichtet ist, aber es kann langsam sein, es während der Entwicklung zu erstellen und neu zu laden.

Vite hingegen verwendet native ES-Module im Browser, um schnellere Build-Zeiten zu ermöglichen. Wenn Sie Vite nicht verwenden möchten, können Sie sich für ein React-Meta-Framework wie Next.js entscheiden, da es auch auf hohe Leistung ausgelegt ist.