Die Mission von Replit ist es, die Programmierung zugänglicher zu machen. Wir bieten Menschen kostenloses Cloud-Computing, damit sie Apps auf jedem Gerät erstellen können. Eine der beliebtesten Methoden zum Erstellen von Anwendungen im Internet ist heute React. In der Vergangenheit waren React-Tools bei Replit jedoch langsam. Während das JavaScript-Ökosystem großartige Tools für professionelle Entwickler entwickelt hat, werden viele der beliebtesten Tools wie Create React App und Webpack immer komplexer und ineffizienter.
Glücklicherweise hat die JavaScript-Community diese Herausforderung angenommen und schnellere und effizientere Tools entwickelt, sodass wir endlich die Erfahrung liefern können, die unsere Benutzer von uns erwartet haben.
Diese neue Erfahrung baut auf Vite auf , einem JavaScript-Build-Tool, das eine schnelle und kostengünstige Entwicklung ermöglicht. Vite bietet eine Reihe von Funktionen, darunter HMR oder Hot Module Replacement, einen Build-Befehl, der Ihre Tools in Rollup integriert , sowie integrierte TypeScript- und JSX-Unterstützung.
Vite beschleunigt die Entwicklung mit React. Es beschleunigt sich sehr. Mit HMR werden die von Ihnen vorgenommenen Änderungen in Millisekunden gerendert, wodurch das Prototyping der Benutzeroberfläche erheblich beschleunigt wird. Vor diesem Hintergrund haben wir beschlossen, unsere React-Vorlage mit Vite neu zu schreiben, und waren schockiert, wie viel schneller sie wurde. So sieht es im Vergleich zu unserer alten CRA-Vorlage aus:
In den letzten Wochen hat unsere neue React-Vorlage unseren Designern geholfen, komplexe UI-Komponenten zu prototypisieren, und vielen unserer Engineering-Kandidaten ermöglicht, innerhalb weniger Stunden eine komplette Webanwendung auf unseren (virtuellen) Websites zu erstellen. Wenn Sie dies in Aktion sehen, ist es leicht zu verstehen, warum:
Wie es funktioniert
Vite behandelt Ihren Quellcode und Ihre Abhängigkeiten unterschiedlich. Im Gegensatz zu Ihrem Quellcode ändern sich Abhängigkeiten während der Entwicklung nicht so oft. Vite nutzt diese Tatsache, indem es Ihre Abhängigkeiten mit esbuild vorbündelt . Esbuild ist ein in Go geschriebener JS-Builder, der Abhängigkeiten 10 bis 100 Mal schneller bündelt als JavaScript-basierte Alternativen wie Webpack und Parcel.
Anschließend wird Ihr Quellcode über native ES- oder ESM- Module bereitgestellt, sodass der Browser das eigentliche Bundle verarbeiten kann.
Schließlich unterstützt Vite HMR, wodurch sichergestellt wird, dass beim Bearbeiten einer Datei nur die relevanten Module ersetzt werden, anstatt das gesamte Bundle neu zu erstellen. Dies führt zu einem erneuten Laden der Seite und einem Zurücksetzen des Status. Im Gegensatz zu anderen Buildern führt Vite HMR auf eigenen ES-Modulen aus. Dies bedeutet, dass nur die betroffenen Module beim Bearbeiten der Datei ungültig gemacht werden müssen. Dies stellt sicher, dass die Aktualisierungszeiten konstant schnell sind und nicht linear skaliert werden, wenn Ihre Anwendung wächst.
Lasst uns beginnen
Um loszulegen, geben Sie einfach unsere React-Vorlage ein oder wählen Sie React.js aus der Dropdown-Liste aus, wenn Sie eine neue Wiederholung erstellen .
Vite ist auch Framework-unabhängig. Wenn Sie React nicht mögen, können Sie auch unsere Vue- und Vanilla JS- Vorlagen verwenden .
Wir hoffen, dass dies Ihnen hilft, Ihre Ideen noch schneller zum Leben zu erwecken, und freuen uns darauf, zu sehen, was Sie kreieren!