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:

1. what is the different between chunks method that I used in my former code than this method?
2. Is my implementation already right regarding this?
3. 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 my const ChildComponent and import it right under components above?
4. and in this answer, why they only use error and loading instead of errorComponent and loadingComponent? is it a shorthand for it?

I hope someone can help me to get a better understanding regarding this problem, thankyou