𝗩𝗶𝘁𝗲 𝘃𝗲𝗿𝗲𝗶𝗻𝗳𝗮𝗰𝗵𝘁
Alte Tools wie Webpack oder CRA funktionieren, indem sie zuerst Ihr gesamtes Projekt bündeln. Sie lesen jede Datei und kombinieren sie zu einer einzigen großen JavaScript-Datei. Das funktioniert bei kleinen Projekten. Bei großen Projekten mit Tausenden von Modulen scheitert es jedoch. Das Erstellen großer Bundles dauert Sekunden oder Minuten. Jedes Mal, wenn Sie eine Datei speichern, baut das Tool große Teile des Bundles neu auf.
Vite funktioniert anders. Moderne Browser unterstützen ES-Module nativ. 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 öffnen. Wenn Sie eine kleine Änderung wünschen, muss der Koch den Großteil des Buffets neu zubereiten. Sie warten lange auf Ihr Essen. So funktioniert Webpack.
Stellen Sie sich nun ein À-la-carte-Restaurant vor. Die Türen öffnen sich sofort. Sie bestellen ein Gericht. Der Koch bereitet nur dieses eine Gericht zu. Wenn Sie später ein Dessert möchten, bereitet der Koch nur das Dessert zu. Sie müssen nicht warten, bis die gesamte Speisekarte gekocht ist. So funktioniert Vite.
Vite nutzt zwei verschiedene Strategien für zwei verschiedene Bedürfnisse:
Entwicklung (vite dev)
- Strategie: Liefert native ESM-Module ohne Bündelung aus.
- Geschwindigkeit: Sofort. Sie hängt nicht von der Projektgröße ab.
- Warum: Lokale Netzwerkanfragen sind schnell.
Produktion (vite build)
- Strategie: Bündelt alles mit Rolldown.
- Geschwindigkeit: Hängt von der Projektgröße ab.
- Warum: Hunderte einzelner Dateien würden zu viele HTTP-Anfragen für echte Nutzer erzeugen. Das Bündeln macht die fertige Website für sie schneller.
Vite bietet Ihnen Geschwindigkeit beim Codieren und Performance beim Launch.
Quelle: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62