Vue компоненты маршрутизатора оцениваемые на импорт

Question

У меня есть приложение, как

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import router from './routes.es6'; 

Vue.use(VueRouter); 

new Vue({ 
    router, 
}).$mount('#app'); 

routes.es6 содержит маршрутизатор модуль:

import VueRouter from 'vue-router'; 
import Index from './pages/index.vue'; 

const routes = [ 
    { 
    path: '/', 
    name: 'index', 
    component: Index, 
    }, 
    ... 
]; 

export default new VueRouter({ 
    routes, 
}); 

Это работает, но имеет один существенный недостаток. Давайте предположим, что мой индекс компонента определяются следующим образом

<template> 
    ... 
</template> 

<script> 
    require(...) 

    export default { 
    ... 
    }; 
</script> 

Теперь все require и import заявления оцениваются как только компоненты будут импортированы в файле routes.es6 и они впрыскивают в основном приложении, даже если они должны быть ограничены к специфическому маршрут.

Как преодолеть это?

Answer 1

Это называется - LAZY ЗАГРУЗКА

Это объясняется также в Вью-маршрутизатор Docs. https://router.vuejs.org/en/advanced/lazy-loading.html