𝗩𝗶𝘁𝗲 𝗲𝗶𝗻𝗳𝗮𝗰𝗵 𝗲𝗿𝗸𝗹𝗮̈𝗿𝘁
Alte Tools wie Webpack oder Create React App funktionieren so, dass sie zuerst Ihr gesamtes Projekt bündeln. Das Tool liest jede Datei und wandelt sie in eine einzige riesige JavaScript-Datei um. Das funktioniert bei kleinen Projekten. Bei großen Projekten stößt es jedoch an seine Grenzen. In großen Projekten dauert dieser Prozess viele Sekunden. Jedes Mal, wenn Sie eine Datei speichern, muss das Tool einen Großteil dieser Arbeit erneut ausführen.
Vite funktioniert anders. Moderne Browser unterstützen ES-Module nativ. Das bedeutet, dass der Browser Importe und Exporte selbst verarbeiten kann. Vite bündelt Ihren Code während der Entwicklung nicht. Es liefert jede Datei nur dann als separates Modul aus, wenn der Browser danach fragt.
Stellen Sie sich ein Buffet-Restaurant vor. Der Koch bereitet jedes einzelne Gericht zu, bevor die Türen geöffnet werden. Wenn Sie eine kleine Änderung wünschen, muss der Koch das gesamte Buffet neu zubereiten. So arbeitet Webpack. Je größer das Projekt, desto länger müssen Sie warten.
Vite ist wie ein À-la-carte-Restaurant. Die Türen öffnen sich sofort. Sie bestellen ein Gericht. Der Koch bereitet nur dieses eine Gericht zu. Wenn Sie später Nachtisch möchten, bereitet der Koch nur den Nachtisch zu. Sie müssen nicht warten, bis die gesamte Speisekarte fertig ist.
Vite nutzt zwei verschiedene Strategien für zwei verschiedene Anforderungen:
Entwicklung (vite dev)
• Strategie: Liefert native ESM-Module ohne Bündelung aus.
• Startgeschwindigkeit: Sofort. Sie hängt nicht von der Projektgröße ab.
• Warum: Lokale HTTP-Anfragen sind auf Ihrem Computer schnell.
Produktion (vite build)
• Strategie: Bündelt alles mithilfe von Rolldown.
• Startgeschwindigkeit: Die Zeit steigt mit der Projektgröße.
• Warum: Hunderte von separaten Dateien verursachen zu viele HTTP-Anfragen für die Nutzer. Bündelung löst dieses Problem.
Vite bietet Ihnen Geschwindigkeit beim Codieren und Effizienz beim Launch.
Quelle: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62