Méthode d'implémentation de chargement asynchrone de composants dans Vue.js (code)

Le contenu de cet article concerne la méthode d'implémentation (code) du chargement asynchrone des composants dans Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsqu'il y a de nombreux composants dans le projet, il y a de nombreux composants packagés par webpack Si les fichiers de tous les composants sont chargés lors de l'accès au composant correspondant à l'une des routes, ce sera un grand gaspillage en termes de. consommation de performances.
À l'heure actuelle, nous devons utiliser le chargement asynchrone des composants , c'est-à-dire que lorsque entre dans le composant correspondant, seuls les composants principaux, le code et le code du composant correspondant sont chargés.
Via vue-router et webpack
nécessite la prise en charge des plug-ins : babel-plugin-syntax-dynamic-import

import Vue from 'vue'import VueRouter from 'vue-router'
// 这里不在提前引入所有需要的组件，而是在路由配置项的component中按需引入即可
// import login from ('../components/login/login.vue')
// import homePagefrom ('../components/login/homePage.vue')
const homePage= () => {
    import('../components/home/homePage.vue')
}
Vue.use(VueRouter)const route = [
    {
            path: '/login',        
            name: "登陆",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/login/login.vue')
    },
    {
            path: '/homePage/:id',        
            name: "首页",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/home/homePage.vue')
    }
]export default () => {
    return new VueRouter ({
        route 
    })
}

Recommandations associées :

Relativement simple Code pour le chargement asynchrone de fichiers JS_javascript skills

Comment implémenter le chargement asynchrone de composants dans vue+webpack ?

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!