Pourquoi choisir Vite
Au fur et à mesure que nous avons commencé à créer des applications de plus en plus volumineuses, la quantité de code JavaScript à traiter a augmenté de façon exponentielle. Les grands projets avec des milliers de modules sont assez courants. Les outils développés à base de JavaScript commencent à rencontrer des goulots d'étranglement de performances : le démarrage du serveur de développement prend généralement beaucoup de temps (voire des minutes !), et même avec le remplacement de module à chaud (HMR), l'effet des modifications de fichiers met quelques secondes à apparaître. le navigateur. Un tel cycle se poursuit encore et encore, et un retour lent affectera grandement l'efficacité et le bonheur du développeur en matière de développement.
Vite vise à résoudre les problèmes ci-dessus en tirant parti des nouveaux développements de l'écosystème : les navigateurs commencent à prendre en charge les modules ES de manière native, et de plus en plus d'outils JavaScript sont écrits dans des langages compilés.
Avantages de Vite
- Dans l'environnement de développement, aucune opération de conditionnement n'est requise et il peut être démarré à froid rapidement.
- Rechargement à chaud léger et rapide (HMR).
- Véritable compilation à la demande, n'attendant plus que toute l'application soit compilée. Compilation Webpack traditionnelle : chaque fois que la compilation est exécutée, chaque route sera trouvée via l'entrée d'entrée, puis les modules respectifs de chaque route seront chargés, puis emballés dans un fichier bundle.js, et enfin le serveur sera informé de la mise à jour à chaud. Donc, en d'autres termes, attendez que tous les fichiers soient chargés avant de rendre la page mise à jour == "plus lentement
- Compilation Vite : différente de la construction traditionnelle, vite préparera d'abord la mise à jour du serveur, puis trouvera le fichier d'entrée, puis trouvera dynamiquement la route à charger pour compiler le module sous cette route, similaire au chargement à la demande, avec un plus petit taille globale et mise à jour plus rapide.
Projet de construction rapide Vite-Cli
1. Préparations pertinentes
- Vite nécessite la version de Node.js >=12.2.0. Cependant, certains modèles nécessitent des versions supérieures de Node.js pour fonctionner, veuillez mettre à niveau si votre gestionnaire de packages vous en avertit. Vous pouvez gérer plusieurs versions de Node sur la même machine à l'aide de n, nvm ou nvm-windows. Pour savoir comment installer Node.js, consultez nodejs.org. Si vous n'êtes pas sûr de la version de Node.js en cours d'exécution sur votre système, exécutez node -v dans une fenêtre de terminal.
- Gestionnaire de packages npm Parce que nous utilisons généralement l'échafaudage fourni par Vite pour construire la structure du projet, nous devons télécharger et installer le package npm et npm >= 6. , vous avez besoin d'un gestionnaire de paquets npm. Ce guide utilise l'interface de ligne de commande du client npm, qui est installée par défaut sur Node.js. Pour vérifier si le client npm est installé, exécutez npm -v dans une fenêtre de terminal.
2. Créer un projet
1. Création de base :
utilisez npm :
npm create vite@latest
Utilisez du fil :
yarn create vite //yarn
Utilisez pnpm :
pnpm create vite
2. Spécifiez le nom du projet et le modèle à utiliser, par exemple, pour construire un projet Vite + Vue, exécutez :
//项目名：my-vue-app； 模板：vue
npm créer vite@latest my - vue - app - template vue // npm 6.x
npm créer vite@latest my - vue - app – – template vue //npm 7+
création de fils vite my - vue - app – template vue // fil
pnpm créer vite ma - vue - app – – template vue //pnpm
3. Démarrer le projet
Accédez d'abord à votre propre projet : cd mon-projet, puis :
npm install
npm run dev
Pourquoi choisir Vite
Au fur et à mesure que nous avons commencé à créer des applications de plus en plus volumineuses, la quantité de code JavaScript à traiter a augmenté de façon exponentielle. Les grands projets avec des milliers de modules sont assez courants. Les outils développés à base de JavaScript commencent à rencontrer des goulots d'étranglement de performances : le démarrage du serveur de développement prend généralement beaucoup de temps (voire des minutes !), et même avec le remplacement de module à chaud (HMR), l'effet des modifications de fichiers met quelques secondes à apparaître. le navigateur. Un tel cycle se poursuit encore et encore, et un retour lent affectera grandement l'efficacité et le bonheur du développeur en matière de développement.
Vite vise à résoudre les problèmes ci-dessus en tirant parti des nouveaux développements de l'écosystème : les navigateurs commencent à prendre en charge les modules ES de manière native, et de plus en plus d'outils JavaScript sont écrits dans des langages compilés.
Avantages de Vite
- Dans l'environnement de développement, aucune opération de conditionnement n'est requise et il peut être démarré à froid rapidement.
- Rechargement à chaud léger et rapide (HMR).
- Véritable compilation à la demande, n'attendant plus que toute l'application soit compilée. Compilation Webpack traditionnelle : chaque fois que la compilation est exécutée, chaque route sera trouvée via l'entrée d'entrée, puis les modules respectifs de chaque route seront chargés, puis emballés dans un fichier bundle.js, et enfin le serveur sera informé de la mise à jour à chaud. Donc, en d'autres termes, attendez que tous les fichiers soient chargés avant de rendre la page mise à jour == "plus lentement
- Compilation Vite : différente de la construction traditionnelle, vite préparera d'abord la mise à jour du serveur, puis trouvera le fichier d'entrée, puis trouvera dynamiquement la route à charger pour compiler le module sous cette route, similaire au chargement à la demande, avec un plus petit taille globale et mise à jour plus rapide.
Projet de construction rapide Vite-Cli
1. Préparations pertinentes
- Vite nécessite la version de Node.js >=12.2.0. Cependant, certains modèles nécessitent des versions supérieures de Node.js pour fonctionner, veuillez mettre à niveau si votre gestionnaire de packages vous en avertit. Vous pouvez gérer plusieurs versions de Node sur la même machine à l'aide de n, nvm ou nvm-windows. Pour savoir comment installer Node.js, consultez nodejs.org. Si vous n'êtes pas sûr de la version de Node.js en cours d'exécution sur votre système, exécutez node -v dans une fenêtre de terminal.
- Gestionnaire de packages npm Parce que nous utilisons généralement l'échafaudage fourni par Vite pour construire la structure du projet, nous devons télécharger et installer le package npm et npm >= 6. , vous avez besoin d'un gestionnaire de paquets npm. Ce guide utilise l'interface de ligne de commande du client npm, qui est installée par défaut sur Node.js. Pour vérifier si le client npm est installé, exécutez npm -v dans une fenêtre de terminal.
2. Créer un projet
1. Création de base :
utilisez npm :
npm create vite@latest
Utilisez du fil :
yarn create vite //yarn
Utilisez pnpm :
pnpm create vite
2. Spécifiez le nom du projet et le modèle à utiliser, par exemple, pour construire un projet Vite + Vue, exécutez :
//项目名：my-vue-app； 模板：vue