I am exploring the implementation of lazy loading in Vue Router to ensure that certain parts of the code are only loaded when they are needed.
Following the guidelines from the official documentation on Lazy Loading in Vue Router available at: https://router.vuejs.org/en/advanced/lazy-loading.html
To test this, I made changes to how the Vault module is imported in my router file:
import Vue from 'vue';
import Router from 'vue-router';
// Containers
import Full from '@/containers/Full';
// Views
// TODO: views should be imported dynamically
import Dashboard from '@/views/Dashboard';
const Vault = () => import('@/views/Vault');
import Page404 from '@/views/Page404';
import Page500 from '@/views/Page500';
import Login from '@/views/Login';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'VENE',
component: Full,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: 'vault',
name: 'vault',
component: Vault
},
],
},
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/404',
name: 'Page404',
component: Page404,
},
{
path: '/500',
name: 'Page500',
component: Page500,
},
],
});
Everything seemed to be working fine, however, upon initial page load, the extracted bundle that was supposed to be lazily loaded actually loads upfront:
https://i.sstatic.net/PeiMc.jpg
Subsequently, when navigating to that view using the router, it appears again in the Dev Tools Network Tab but shows that it's loaded from the disk, indicating that the bundle is being loaded on the first page visit, contradicting the concept of lazy loading.