Pourquoi nous sommes passés de Webpack à Vite

image




La mission de Replit est de rendre la programmation plus accessible. Nous offrons aux gens un cloud computing gratuit afin qu'ils puissent créer des applications sur n'importe quel appareil. L'un des moyens les plus courants de créer des applications sur Internet aujourd'hui est React. Cependant, historiquement, les outils React ont été lents sur Replit. Alors que l'écosystème JavaScript a créé d'excellents outils pour les développeurs professionnels, bon nombre des plus populaires, tels que Create React App et Webpack, deviennent de plus en plus complexes et inefficaces.



Heureusement, nous avons vu la communauté JavaScript saisir ce défi et passer à la création d'outils plus rapides et plus efficaces, ce qui signifie que nous pouvons enfin offrir l'expérience que nos utilisateurs attendent de nous.



Cette nouvelle expérience s'appuie sur Vite , un outil de création JavaScript qui permet un développement rapide et rentable. Vite est livré avec un certain nombre de fonctionnalités, notamment HMR ou Hot Module Replacement, une commande de construction qui intègre vos outils avec Rollup , et la prise en charge intégrée de TypeScript et JSX.



Vite accélère le développement avec React. Cela accélère beaucoup. Avec HMR, les modifications que vous apportez sont rendues en quelques millisecondes, ce qui accélère considérablement le prototypage de l'interface utilisateur. Dans cet esprit, nous avons décidé de réécrire notre modèle React en utilisant Vite et avons été choqués de voir à quel point il était plus rapide. Voici à quoi cela ressemble par rapport à notre ancien modèle de l'ARC:







Au cours des dernières semaines, notre nouveau modèle React a aidé nos concepteurs à prototyper des composants d'interface utilisateur complexes et a permis à bon nombre de nos candidats ingénieurs de créer une application Web complète en quelques heures seulement sur nos sites (virtuels). Lorsque vous voyez cela en action, il est facile de comprendre pourquoi:



image



Comment ça fonctionne



Vite fonctionne en traitant votre code source et vos dépendances différemment. Contrairement à votre code source, les dépendances ne changent pas aussi souvent au cours du développement. Vite profite de ce fait en pré- regroupant vos dépendances avec esbuild . Esbuild est un générateur JS écrit en Go qui regroupe les dépendances 10 à 100 fois plus rapidement que les alternatives basées sur JavaScript comme Webpack et Parcel.



Il sert ensuite votre code source via des modules ES ou ESM natifs , ce qui permet au navigateur de gérer le bundle réel.



Enfin, Vite prend en charge HMR, ce qui garantit que lorsque vous modifiez un fichier, seuls les modules concernés sont remplacés, plutôt que de reconstruire l'ensemble du bundle, ce qui provoque un rechargement de page et réinitialise l'état. Contrairement à d'autres constructeurs, Vite fait HMR sur ses propres modules ES, ce qui signifie qu'il n'a besoin que d'invalider les modules affectés lors de l'édition du fichier. Cela garantit que les temps de mise à jour sont constamment rapides et ne sont pas mis à l'échelle de manière linéaire à mesure que votre application se développe.



Commençons



Pour commencer, branchez simplement notre modèle React ou sélectionnez React.js dans la liste déroulante lors de la création d'une nouvelle relecture .



Vite est également indépendant du framework, donc si vous n'aimez pas React, vous pouvez également utiliser nos modèles Vue et Vanilla JS .



Nous espérons que cela vous aidera à donner vie à vos idées encore plus rapidement, et nous avons hâte de voir ce que vous créez!



All Articles