Vue 2 / Vue CLI 3: Creating async single file components

Question

I used Vue-CLI 3 and told it that I want to use vue-router. It generates this type of Webpack import statement in the created routes.js.

// 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')

I proceeded to create four views. Some views call components inside.

Home.vue (Home page and default route at '/')
About.vue
Contact.vue
Photos.vue

I have made About, Contact, and Photos asynchronous in routes.js

import Home from './views/Home.vue';

/* name = named routes */
export const routes = [
    {
        path: '/',
        component: Home,
        name: 'home'
    },
    {
        path: '/photo/:id',
        // component: Photo,
        component: () => import(/* webpackChunkName: "Photo" */ './views/Photo.vue'),
        name: 'photo'
    },
    {
        path: '/about',
        component: () => import(/* webpackChunkName: "About" */ './views/About.vue'),
        // component: About,
        name: 'about'
    },
    {
        path: '/contact',
        // component: Contact,
        component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue'),
        name: 'contact'
    },
    {
        /* Wildcard path to catch all other paths */
        path: '*',
        redirect: '/'
    }
];

When I do a build, Vue CLI does create additional JS and CSS chunks (about.[hash].js, etc.). However, when I load the Home route, these other chunks are loaded according to Chrome's devtools, but there is also nothing in the response tab. Then, when I visit About, Contact, or Photo routes, the browser loads those chunks, but now there is now something in the response tab.

Is async working as intended?

Thanks.

Stephen Stephen · Accepted Answer · 2018-09-12T20:03:14

I think I might have figured out what these extra calls on my Home route are. Webpack has a config where prefetching can be turned on. I guess Vue CLI's or Webpack's default is to have the prefetch turned on.

https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

Somebody on the Vue forums pointed to the Vue-CLI documentation to me: https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch

Vue 2 / Vue CLI 3: Creating async single file components

1 Answers