Vue3 router lazy loading does not work as expected

Question

I have a simple Vue Hello-world application created via vue-cli. There is the router which should be lazy by default. But as I see in browser network tab it is not lazy. It loads all the components at once on first page load. The only thing I did is add one route to the router. It looks like documentation example. Also as documentation say I have installed @babel/plugin-syntax-dynamic-import and babel.config.js updated. Can somebody tell me please what is the problem?

Here is the router code:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const 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')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue'),
    props: {
      title: 'Contact',
      test: 'Some test value',
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Here is babel.config.js file

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Does this answer your question? [My lazy loading router painfully loads everything](https://stackoverflow.com/questions/66670617/my-lazy-loading-router-painfully-loads-everything) — Michal Levý, May 25 '21 at 17:46
Dont know. As look at the performance tab in Chrome i see something worse. Vue generates something called chunk-vendors.js which size is about 2.9MB. What is that? — Čamo, May 25 '21 at 18:33
`chunk-vendors.js` is a standard name used for a chunk containing `node_modules` dependencies. Vue itself, Router, any other library you are using (Vuetify, Quasar etc.) This chunk will never be lazy loaded. — Michal Levý, May 25 '21 at 19:00
Ok thanks I understand it now. I though lazy should not load the components file at all. But this seems to be a better solution. — Čamo, May 25 '21 at 19:03

score 0 · Answer 1 · answered May 25 '21 at 19:01

Ok so the reason is prefetch of the content. It is loaded with low priority. It means that it can download a given resource, even if it is not detected in the page. The resource is downloaded with a low priority.

This is how it looks in the generated html:

<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <title>vue-hello-world</title>
    <link href="/js/about.b54d7802.js" rel="prefetch">
    <link href="/js/contact.35a4dd8d.js" rel="prefetch">
    <link href="/css/app.f824e728.css" rel="preload" as="style">
    <link href="/js/app.b9f6d9e9.js" rel="preload" as="script">
    <link href="/js/chunk-vendors.2fe81e6e.js" rel="preload" as="script">
    <link href="/css/app.f824e728.css" rel="stylesheet">
</head>
<body>
    <noscript>
    <strong>We're sorry but vue-hello-world doesn't work properly without JavaScript enabled. 
        Please enable it to continue.</strong></noscript><div id="app"></div>
        <script src="/js/chunk-vendors.2fe81e6e.js"></script>
        <script src="/js/app.b9f6d9e9.js"></script>
    </body>
</html>

Vue3 router lazy loading does not work as expected

1 Answers1