Edit: Vue CLI 5 does not add the preload/prefetch plugin to the webpack config anymore. I tried adding the @vue/preload-webpack-plugin
plugin myself and adding in the same config that the Vue CLI 4 used to add, but that still didn't work. Would love to know how to add prefetch to a Vue CLI 5 project.
In my Vue router, I have a lazily loaded route defined with:
const ShoppingCart = () => import('../cart/ShoppingCart.vue')
...
routes: [
{
path: '/cart',
name: 'Cart',
component: ShoppingCart,
},
...
]
This route is successfully lazy loading, but I would now like to prefetch it.
I have tried adding this in my vue.config.js
to add the webpack prefetch plugin:
configureWebpack: {
plugins: [
new webpack.PrefetchPlugin('/src/cart/ShoppingCart.vue'),
],
},
And I have tried adding this to my dynamic import:
const ShoppingCart = () => import(/* webpackPrefetch: true */'../cart/ShoppingCart.vue')
But even with both of those in place, my route is not pre-fetched.