Vue router components evaluated on import

Question

I have an application like

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

Vue.use(VueRouter);

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

routes.es6 contains my router module:

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

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

export default new VueRouter({
  routes,
});

This works but has one major drawback. Let's assume my index component is defined as follows

<template>
    ...
</template>

<script>
  require(...)

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

Now all require and import statements are evaluated once the components are imported in the routes.es6 file and they are injected in the main app even though they should be scoped to the specific route.

How to overcome this?

Answer 1

It is called - LAZY LOADING

It is explained well in Vue-Router docs. https://router.vuejs.org/en/advanced/lazy-loading.html