Comment utiliser la séparation de code de Webpack pour implémenter le chargement de Vue

Le contenu de cet article explique comment utiliser la séparation de code de Webpack pour implémenter le chargement de Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsqu'un projet Vue devient très volumineux, utilisez la fonction de séparation de code de Webpack pour séparer le code de Vue Components, routes ou Vuex et chargez-le à la demande. Améliorez considérablement le chargement. vitesse du premier écran de l’application.

Dans les projets Vue, nous pouvons utiliser les fonctions de chargement paresseux et de séparation de code dans trois situations différentes :

• Composants Vue, également appelés composants asynchrones

• Vue-Router

• Vuex

Ce que les trois ont en commun est l'utilisation de l'importation dynamique, qui a été prise en charge dans la deuxième version de Webpack.

Chargement paresseux dans les composants Vue

Dans Eggheads, il y a une explication sur l'utilisation des composants asynchrones Vue pour implémenter le chargement à la demande des composants.

Pour implémenter un composant asynchrone, il vous suffit d'utiliser la fonction import pour enregistrer le composant :

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

Vous pouvez également utiliser la méthode d'enregistrement locale :

new Vue({
  // ...
  components: {
    'AsyncCmp': () => import('./AsyncCmp')
  }
})

utiliser La fonction flèche pointe vers la fonction import, et Vue exécutera le code qui demande de charger le composant lorsque le composant est nécessaire.

Si le composant importé est exporté à l'aide d'une méthode nommée, vous pouvez utiliser la déstructuration d'objet dans la valeur de retour de Promise pour charger le composant à la demande. Voici un exemple de chargement du composant UiAlert de KeenUI :

components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}

Chargement paresseux dans le routeur Vue

Le routeur Vue prend en charge nativement le chargement paresseux charge de chargement. Identique au chargement paresseux des composants, en utilisant la fonction import. Par exemple, nous voulons charger paresseusement le composant /login sous la route Login.

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

Chargement paresseux dans Vuex

La méthode registerModule de Vuex nous permet de créer dynamiquement des modules Vuex. Si nous utilisons la fonction import pour renvoyer le module comme charge utile dans Promise, un chargement paresseux est obtenu.

const store = new Vuex.Store()

...

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

Résumé

Le chargement paresseux est très simple dans Vue + Webpack. Utilisez rapidement les méthodes apprises ci-dessus pour séparer le code de votre projet Vue et les charger à la demande lorsqu'ils sont nécessaires. Cela peut réduire considérablement le temps de chargement du premier écran de l'application.

Recommandations associées :

Le système résume les méthodes JS courantes et les organise (collections)

Webpack4 et méthodes d'implémentation de réaction pour la création de plusieurs -page applications

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!