Compétences en développement Vue3+TS+Vite : Comment utiliser Vite pour le fractionnement de code et le chargement à la demande

Compétences en développement Vue3+TS+Vite : Comment utiliser Vite pour le fractionnement de code et le chargement à la demande

Avec la complexité de l'ingénierie frontale et l'augmentation de l'échelle des projets, l'optimisation du code est devenue un incontournable pour chaque développeur Bonne question. Un aspect important de ceci est le fractionnement du code et le chargement à la demande. Le fractionnement du code peut diviser l'ensemble du code du projet en petits morceaux, et le chargement à la demande peut charger le code correspondant en cas de besoin, améliorant ainsi efficacement les performances et la vitesse de chargement des pages Web. Dans le projet Vue3+TypeScript, nous pouvons optimiser le fractionnement du code et le chargement à la demande en utilisant l'outil de construction Vite.

1. Qu'est-ce que Vite ?

Vite est un outil de construction frontal basé sur ESM. Il utilise les caractéristiques des modules ES natifs pour obtenir un démarrage à froid et une mise à jour à chaud plus rapides, et prend en charge des fonctions d'optimisation telles que le chargement à la demande et le fractionnement de code.

2. L'utilisation du fractionnement de code

Dans le projet Vue3+TypeScript, nous pouvons utiliser la fonction d'importation fournie par Vite pour implémenter le chargement et le fractionnement du code à la demande. Nous pouvons réduire la pression de chargement de la page entière en divisant le code en différents modules et en chargeant les modules correspondants uniquement en cas de besoin.

1. Installer Vite

Tout d'abord, nous devons installer Vite dans le projet. Il peut être installé via npm ou Yarn :

npm install -g create-vite 构建工具初始化
create-vite my-project 初始化新的项目
cd my-project 进入项目目录
npm install 安装依赖

2. Chargement de modules à la demande

Dans Vue3, nous pouvons implémenter le chargement à la demande en utilisant la fonction d'importation. Par exemple, nous pouvons utiliser la fonction d'importation pour charger des modules spécifiques là où ils sont nécessaires, au lieu de charger tous les modules en même temps.

import { createApp, defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

Dans l'exemple ci-dessus, nous avons utilisé la fonction définirAsyncComponent pour créer un composant asynchrone, puis avons chargé les composants Accueil et À propos à la demande via la fonction d'importation. Cela peut réduire efficacement la taille du fichier requise pour le chargement sur le premier écran et améliorer la vitesse de chargement des pages.

3. Configurez le chargement à la demande de Vite

Dans Vite, nous pouvons implémenter le chargement et la segmentation du code à la demande en configurant vite.config.js.

1. Installer les dépendances

Avant d'utiliser le chargement à la demande et le fractionnement du code dans le projet, nous devons installer les dépendances correspondantes :

npm install @vitejs/plugin-legacy

2. Configurer vite.config.js

Créer un vite.config dans le répertoire racine du projet .js et ajoutez le code suivant :

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

Dans le code ci-dessus, nous utilisons le plug-in @vitejs/plugin-legacy et spécifions les navigateurs qui doivent être pris en charge via l'option cibles, où "par défaut" indique la prise en charge de Dans les navigateurs modernes, « pas IE 11 » signifie que le navigateur IE11 n'est pas pris en charge.

3. Projet de compilation

Avec la configuration ci-dessus, nous avons terminé la configuration du chargement et du fractionnement du code à la demande. Ensuite, nous pouvons compiler le projet en exécutant la commande suivante :

npm run build

Une fois la compilation terminée, Vite divisera automatiquement le code et chargera les modules correspondants selon les besoins.

Grâce à la configuration ci-dessus, nous avons utilisé avec succès Vite pour implémenter le chargement et le fractionnement du code à la demande. Cela peut améliorer efficacement les performances et la vitesse de chargement du projet et réduire le volume de chargement de la page entière. Dans le projet Vue3+TypeScript, l'utilisation de Vite pour le fractionnement du code et le chargement à la demande est un très bon choix. Cela peut rendre notre projet plus efficace et optimisé, et améliorer l'expérience utilisateur.

Résumé :

Cet article explique comment utiliser Vite pour implémenter le fractionnement de code et le chargement à la demande de projets Vue3+TypeScript. En configurant le chargement à la demande de Vite, nous pouvons diviser l'ensemble du code du projet en petits morceaux à la demande au lieu de charger tous les modules en même temps, améliorant ainsi les performances des pages et la vitesse de chargement. En tant qu'outil de construction front-end basé sur ESM, Vite permet un démarrage à froid et une mise à jour à chaud plus rapides en tirant parti des caractéristiques des modules ES natifs, tout en prenant en charge des fonctions d'optimisation telles que le chargement à la demande et le fractionnement de code. Dans les projets réels, nous pouvons configurer Vite en fonction de besoins spécifiques pour obtenir le meilleur effet d'optimisation des performances. J'espère que cet article sera utile à tout le monde pour optimiser le fractionnement du code et le chargement à la demande dans les projets Vue3+TypeScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!