Here is the lazy loaded implementation using Vue official router

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

const Foo = () => import("@/ponents/Test2");

const Bar = () => import("@/ponents/Test");

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      ponent: Bar
    },
    {
      path: "/test2",
      name: "test2",
      ponent: Foo
    }
  ]
});

src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount("#app");

Routes work as expected however the lazy loading not working properly, when I inspect the network tab on the first load I can able to see the web pack generated lazily loaded files

Here is the lazy loaded implementation using Vue official router

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

const Foo = () => import("@/ponents/Test2");

const Bar = () => import("@/ponents/Test");

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      ponent: Bar
    },
    {
      path: "/test2",
      name: "test2",
      ponent: Foo
    }
  ]
});

src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount("#app");

Routes work as expected however the lazy loading not working properly, when I inspect the network tab on the first load I can able to see the web pack generated lazily loaded files

• javascript
• vuejs2
• lazy-loading
• vue-router

2 Answers 2

The problem is the webpack preloadplugin adds a prefetch tag to all async chunks. To prevent this, add the following to your vue.config.js

  chainWebpack: config => {
    config.plugins.delete('prefetch');
  }

Source: https://github./vuejs/vue-cli/issues/979#issuement-373027130

I believe You're doing it a little wrong..

If You want to enable chunk splitting and then lazy loading the ponent for the route, Your approach should look a little like this:

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      ponent: () => import(/* webpackChunkName: "bar" */ '@/ponents/Test.vue')
    },
    {
      path: "/test2",
      name: "test2",
      ponent: () => import(/* webpackChunkName: "foo" */ '@/ponents/Test2.vue')
    }
  ]
});

this will create separate chunks named 'bar' and 'foo' that will be lazyloaded only on route entered.