Usually I import my component using chunk method like this in Vue.js
to optimize my page performance especially regarding load speed, just for information I used Vue 2
:
<template>
<div>
... // some HTML code
<ChildComponent />
</div>
</template>
</script>
const ChildComponent = () => import(/* webpackPrefetch: true */ '../components/ChildComponent.vue');
export default {
name: 'ParentComponent',
components: { ChildComponent },
}
... //some script
</script>
<style lang="scss" scoped>
... // some styling
</style>
but today, my friend tell me that there is this method that Vue
provide from version 2.3
for async function and it works the same as chunks as far as I read the docs in here, the name of this method is defineAsyncComponent
, so I try to read it and it seems I can change my code easily into this:
</script>
const LoadPopup = () => import(/* webpackPrefetch: true */ '../components/LoadPopup.vue');
const ErrorPopup = () => import(/* webpackPrefetch: true */ '../components/ErrorPopup.vue');
const ChildComponent = defineAsyncComponent({
// the loader function
loader: () => import('../components/ChildComponent.vue'),
loadingComponent: LoadPopup,
delay: 200,
errorComponent: ErrorPopup,
timeout: 3000
})
export default {
name: 'ParentComponent',
components: {
ChildComponent: ChildComponent
},
}
... //some script
</script>
And here is my question regarding this:
- what is the different between chunks method that I used in my former code than this method?
- Is my implementation already right regarding this?
- And last, is it correct if I want to add more component, then it means I can just make like
const ChildComponent2
with the same way as myconst ChildComponent
and import it right undercomponents
above? - and in this answer, why they only use
error
andloading
instead oferrorComponent
andloadingComponent
? is it a shorthand for it?
I hope someone can help me to get a better understanding regarding this problem, thankyou