Vue router always loads the lazy loaded modules on intial loading

Question

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("@/components/Test2");

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

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      component: Bar
    },
    {
      path: "/test2",
      name: "test2",
      component: 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

Answer 1

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.com/vuejs/vue-cli/issues/979#issuecomment-373027130