My Vue application is utilizing lazy loading router setup with the following configuration:
router.ts
const Grid = () => import(/* webpackChunkName: "grid" */ './views/grid/Grid.vue');
const Calendar = () => import(/* webpackChunkName: "calendar" */ './views/calendar/Calendar.vue');
const Tree = () => import(/* webpackChunkName: "tree" */ './views/tree/Tree.vue');
const routes = [
{ path: '/', component: Grid, name: 'grid' },
{ path: '/calendar', component: Calendar, name: 'calendar' },
{ path: '/tree', component: Tree, name: 'tree' },
];
export const router = new VueRouter({ routes });
I have implemented Babel and incorporated the dynamic import plugin as recommended in the documentation
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
],
};
Upon inspecting the application in a browser, I notice that all required assets are being loaded when navigating between routes. However, during the initial load, I observe that all chunks are already loaded.
This behavior does not appear to be due to prefetching since all chunks are preloaded without delay, rendering the app temporarily unusable while everything loads.
Why are all my chunks being loaded upfront? How can I approach debugging this issue?