I have successfully implemented lazy loading for components and templates individually, but I am struggling to combine the two.
Here's an example of how I lazy load a component:
// In my main.js file
const router = new VueRouter({
routes: [
{ path: '/lazy', component: () => import('./lazy.js') }
]
})
// Inside lazy.js
export default {
template: '<div>Lazy loaded component</div>'
}
This method works well as the lazy.js component is only downloaded when navigating to /lazy.
And here's how I lazy load a template:
// All in my main.js file
const lazyTemplate = Vue.component('lazyComponent', function(resolve) {
fetch('./lazy.html')
.then(response => response.text())
.then(function(data) {
resolve({
template: data
});
});
});
const router = new VueRouter({
routes: [
{ path: '/lazy', component: lazyTemplate }
]
});
Similarly, this method works effectively by downloading the lazy.html template only when navigating to /lazy.
However, my challenge lies in integrating these two approaches. I'm trying to find a way to lazily load a component that in turn lazily loads a template without relying on tools like webpack. How can I achieve this seamlessly?