In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s needed. To make this happen, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. These components are known as async component.
Let’s see an example of async component using webpack code-splitting feature,
1 2 3 4 | Vue.component('async-webpack-example', function (resolve, reject) { // Webpack automatically split your built code into bundles which are loaded over Ajax requests. require(['./my-async-component'], resolve) }) |
Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders.
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
