Écosystème Vite : plugins et outils
Écosystème unplugin, vite-plugin-vue, vite-plugin-inspect et vite-bundle-visualizer
Écosystème Vite : plugins et outils est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
L’écosystème des extensions Vite
Le système d’extensions de Vite (fondé sur l’interface de Rollup et sur des hooks spécifiques à Vite) alimente un riche écosystème. Pour les projets Vue, quelques extensions améliorent considérablement l’expérience de développement : importations automatiques, enregistrement automatique des composants, inspection des transformations et analyse des paquets.
unplugin-auto-import
unplugin-auto-import importe automatiquement les API courantes (le ref et le computed de Vue, les assistants de Router et de Pinia, ainsi que vos propres fonctions de composition), afin que vous puissiez les utiliser sans écrire de déclarations d’importation.
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: 'src/auto-imports.d.ts'
})
]
})Importation automatique de vos fonctions de composition
Indiquez-lui le répertoire de vos fonctions de composition : ces fonctions seront elles aussi disponibles globalement. L’extension génère un .d.ts afin que TypeScript et votre éditeur continuent de les comprendre.
AutoImport({
imports: ['vue'],
dirs: ['src/composables'], // auto-import useFoo, useBar
dts: 'src/auto-imports.d.ts'
})
// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()unplugin-vue-components
unplugin-vue-components importe et enregistre automatiquement les composants à la demande — placez <MyButton /> dans un modèle et l’extension l’importe automatiquement. Elle retire également du paquet les composants inutilisés.
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
dirs: ['src/components'],
dts: 'src/components.d.ts'
})
]
})Résolveurs pour les bibliothèques d’interface
L’extension de composants prend en charge les résolveurs de bibliothèques d’interface populaires (Element Plus, Vuetify, Naive UI) et importe automatiquement leurs composants et leurs feuilles de style lors de leur utilisation, sans enregistrement manuel.
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({
resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no importvite-plugin-inspect
vite-plugin-inspect fournit une interface permettant de voir comment chaque extension transforme votre code au fil de la chaîne de transformation. Elle est précieuse pour comprendre pourquoi un fichier prend finalement la forme qu’il a.
import Inspect from 'vite-plugin-inspect'
export default defineConfig({
plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in devLire la chaîne de transformation
Dans l’interface d’inspection, vous choisissez un module et parcourez la transformation effectuée par chaque extension. Vous pouvez voir, par exemple, comment le SFC Vue est séparé en rendu et en script, et comment l’importation automatique injecte du code — ce qui permet d’identifier précisément les extensions qui posent problème.
Visualiseur de paquets
Pour comprendre la taille du paquet de production, utilisez une extension de visualisation (par exemple rollup-plugin-visualizer). Elle génère une arborescence interactive indiquant le contenu de chaque fragment après la compilation.
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
visualizer({ open: true, filename: 'stats.html' })
]
})Exploiter les informations du visualiseur
Utilisez l’arborescence pour repérer les dépendances surdimensionnées et les paquets dupliqués. Parmi les corrections courantes : charger à la demande les routes et composants lourds, choisir des bibliothèques plus légères ou configurer manualChunks pour séparer le code des dépendances tierces.
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia']
}
}
}
}Combiner les extensions
Ces extensions se combinent bien. Une configuration Vue typique associe l’importation automatique, les composants, l’inspection (réservée au développement) et un visualiseur (réservé à la compilation) pour offrir un flux de travail aussi fluide que possible.
plugins: [
vue(),
AutoImport({ imports: ['vue', 'vue-router'] }),
Components({ dirs: ['src/components'] }),
Inspect(),
visualizer({ filename: 'stats.html' })
]Prendre en compte les fichiers d.ts dans l’exclusion Git
Les extensions d’importation automatique et de composants génèrent des fichiers .d.ts. Décidez de les enregistrer dans Git (cela aide la vérification des types par l’intégration continue sans compilation) ou de les exclure de Git (ils sont régénérés au démarrage du développement). Dans tous les cas, conservez-les dans les inclusions de tsconfig.
Vérification rapide
Vérifiez votre compréhension de l’écosystème des outils Vite.
Récapitulatif
Vous avez découvert l’écosystème des outils Vite :
- unplugin-auto-import — importe automatiquement les API et fonctions de composition Vue
- unplugin-vue-components — importe et enregistre automatiquement les composants, avec des résolveurs d’interfaces
- vite-plugin-inspect — permet de voir comment les extensions transforment chaque module
- visualiseur de paquets — arborescence du contenu des fragments pour guider l’optimisation
- Ces extensions se combinent pour former un flux de développement et de compilation Vue fluide
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Écosystème Vite : plugins et outils » est-elle gratuite ?
Oui — le texte complet de « Écosystème Vite : plugins et outils » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Écosystème Vite : plugins et outils » ?
Écosystème unplugin, vite-plugin-vue, vite-plugin-inspect et vite-bundle-visualizer Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Écosystème Vite : plugins et outils » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mode Vapor de Vue : optimisation à la compilation
- Écosystème Vite : plugins et outils
- Macros Vue et propositions communautaires
- Choisir la bonne pile Vue pour 2025 et au-delà