Der Build-Prozess einer Vue-App: Rollup vs. Rolldown

Geschrieben von Andy Li

Ein Build-Tool ist für die moderne Webentwicklung unerlässlich und fungiert als Motor, der Ihren Rohcode in etwas umwandelt, das Browser verstehen und effizient ausführen können. Ohne ein schnelles, zuverlässiges Build-Tool kann es beim Starten Ihres Entwicklungsservers zu frustrierend langen Startzeiten kommen, und selbst einfache Codeänderungen können kostbare Sekunden in Anspruch nehmen, bis sie im Browser angezeigt werden – was Ihren Entwicklungsfluss und Ihre Produktivität beeinträchtigt.

In diesem Artikel sprechen wir über alle Dinge, die am Erstellungsprozess einer Vue.js-App (oder einer React.js-App) beteiligt sind, einschließlich Vite, Esbuild, Rollup und einem Up-and- Das kommende Tool namens Rolldown, das von Evan You (Ersteller von Vue.js und Vite.js) entwickelt wird.

Beginnen wir zunächst mit Vite.

Vites aktueller Build-Prozess

Wie viele andere Frameworks verwendet Vue.js Vite als Build-Tool.

Vite verfügt über zwei verschiedene Modi: Entwicklung und Produktion. Sie werden hinter den Kulissen unterschiedlich umgesetzt.

Vite verwendet unterschiedliche Build-Strategien für Entwicklungs- und Produktionsumgebungen, um ihre individuellen Anforderungen zu optimieren. Bei der Entwicklung liegt der Fokus auf schnellem Feedback und schnellem Hot Module Replacement (HMR) für ein reibungsloses Entwicklererlebnis. In der Produktion verlagert sich die Priorität auf die Generierung optimierter, leistungsstarker Bundles für Endbenutzer.

Lassen Sie uns untersuchen, wie Vite mit Entwicklungs-Builds umgeht und wo sein innovativer Ansatz wirklich glänzt.

Vite im Entwicklungsmodus

Im Entwicklungsmodus ist die Build-Geschwindigkeit entscheidend. Anstatt Code nach jeder Änderung zu bündeln, stellt Vite die geänderten Dateien direkt im ESM-Format bereit (wie der