Vue loading all the chunks on the first request

Question

I am learning Vue and just got to the routing chapter. I am able to create a template project with vue/cli with a initial router configuration. This is the Router code:

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

According to the coments on the code and the docs this should be enough to lazy load the About component.

When I try to load the app page the "about.js" script is fetched:

If I navigate to About the browser fetches the script from disk cache:

I got confused. I was expecting to see the script about.js loaded only after I navigate to the About page. Am I missing something?

Answer 1

The discussion pointed by @TJWeems was very elucidative.

I obtained the expected behavior after disabling the prefetch plugin with webpack-chain. I just created a vue.config.js on my root dir (the same as package.json) with the following:

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

Just to remember I did it for the sake of curiosity. I will probably leave the prefetch plugin enabled on future projects and just consider to disable it on specific situations.