Utilisez-vous toujours create-react-app pour configurer votre projet React? Passez à Vite pour de meilleures performances et une vitesse de développement plus rapide.

Lors du démarrage d'un nouveau projet React, de nombreux développeurs se tournent vers créer-réagir-app comme outil de commande incontournable pour l'installation et la configuration du projet. Cependant, Vite est une meilleure alternative. Il offre des temps de développement plus rapides et de meilleures performances.

Qu'est-ce que Vite?

Vite est un outil de construction et un serveur de développement conçu pour améliorer le processus de développement d'applications Web modernes. Pour ce faire, il divise vos modules d'application en dépendances et en code source. Les dépendances sont des modules qui ne changent pas souvent, tandis que le code source est généralement modifié fréquemment pendant le développement.

Vite utilise esbuild, un bundler basé sur Go qui est nettement plus rapide que les bundlers traditionnels basés sur JavaScript pour accélérer le processus de génération du code source. Il pré-regroupe également les dépendances de votre application et sert le code source sur l'ESM natif, permettant aux navigateurs d'optimiser le chargement des modules pour une application plus efficace et plus rapide performance. Lorsque vient le temps de déployer votre application en production, Vite dispose d'une commande de construction intégrée qui optimise automatiquement votre application pour le déploiement, garantissant ainsi le bon fonctionnement de votre application.

instagram viewer

Création d'un projet Vite

Avant de créer un projet Vite, notez que Vite nécessite Node.js version 14.18+ ou 16+. Vous pouvez vous référer à ces articles pour installer Node sur votre machine Windows ou Ubuntu.

  • Comment installer Node.js sur Windows.
  • Apprendre comment installer Npm et Node.js sur Ubuntu

Créez un projet Vite en exécutant cette commande dans le terminal.

npm créer vite@latest

Une fois que la commande commence à s'exécuter, vous serez invité à entrer un nom de projet. Tapez le nom de votre projet et cliquez sur entrer.

Ensuite, Vite vous demandera de sélectionner un cadre. Sélectionnez Réagir.

Vite vous demandera également de sélectionner une variante. Sélectionnez JavaScript.

Lorsque Vite a terminé l'échafaudage du projet, naviguez dans le répertoire qu'il crée et installez les dépendances via npm.

installation npm

Pour exécuter le projet, utilisez cette commande :

npm run dev

Cela devrait être la page d'accueil.

Vous pouvez commencer à modifier votre projet et vos modifications seront reflétées dans le navigateur.

Utilisez Vite pour une vitesse de développement rapide

CRA (create-react-app) est généralement l'outil par défaut pour configurer la structure du projet et la configuration d'une application React. C'est pratique car tout est configuré pour vous, mais la construction et le rechargement peuvent être lents pendant le développement.

Vite, d'autre part, utilise des modules ES natifs dans le navigateur pour fournir des temps de construction plus rapides. Si vous ne souhaitez pas utiliser Vite, vous pouvez opter pour un méta framework React comme Next.js car il est également conçu pour être très performant.