Implementierungsmethode des asynchronen Ladens von Komponenten in Vue.js (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode (Code) des asynchronen Ladens von Komponenten in Vue.js. Ich hoffe, dass er für Sie hilfreich ist.

Wenn das Projekt viele Komponenten enthält, werden viele Komponenten per Webpack gepackt. Wenn beim Zugriff auf die Komponente, die einer der Routen entspricht, die Dateien aller Komponenten geladen werden, ist dies sehr verschwenderisch Leistungsverbrauch.
Zu diesem Zeitpunkt müssen wir die Komponente verwenden, um asynchron zu laden. Das heißt, wenn in die entsprechende Komponente eintritt, werden nur die Kernkomponenten, der Code und der entsprechende Komponentencode geladen .
Erreicht durch Vue-Router und Webpack
Erfordert Plug-in-Unterstützung: 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 
    })
}

Verwandte Empfehlungen:

Relativ einfach asynchron Laden des Codes von JS-Dateien_Javascript-Fähigkeiten

Wie implementiert man das asynchrone Laden von Komponenten in Vue+Webpack?

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des asynchronen Ladens von Komponenten in Vue.js (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!