Le processus de création d'une application Vue : rollup vs rolldown

Écrit par Andy Li

Un outil de construction est essentiel pour le développement Web moderne, agissant comme un moteur qui transforme votre code brut en quelque chose que les navigateurs peuvent comprendre et exécuter efficacement. Sans un outil de construction rapide et fiable, vous pourriez être confronté à des temps de démarrage extrêmement longs lors du lancement de votre serveur de développement, et même de simples modifications de code pourraient prendre de précieuses secondes à être reflétées dans le navigateur, perturbant ainsi votre flux de développement et votre productivité.

Dans cet article, nous parlerons de tout ce qui est impliqué dans le processus de construction d'une application Vue.js (ou d'une application React.js), y compris Vite, esbuild, Rollup et un up-and- outil à venir construit par Evan You (créateur de Vue.js et Vite.js) appelé Rolldown.

Tout d'abord, commençons par Vite.

Processus de construction actuel de Vite

Comme beaucoup d'autres frameworks, Vue.js utilise Vite comme outil de construction.

Vite a deux modes différents : développement et production. Ils sont mis en œuvre différemment en coulisses.

Vite utilise différentes stratégies de construction pour les environnements de développement et de production afin d'optimiser leurs besoins uniques. Pendant le développement, l'accent est mis sur la fourniture d'un retour d'information rapide et d'un remplacement rapide des modules à chaud (HMR) pour une expérience de développement fluide. En production, la priorité est désormais de générer des bundles optimisés et performants pour les utilisateurs finaux.

Explorons comment Vite gère les builds de développement, où son approche innovante brille vraiment.

Vite en mode développement

En mode développement, la vitesse de construction est cruciale. Plutôt que de regrouper le code après chaque modification, Vite sert les fichiers modifiés directement au format ESM (comme le code