Question

What are Async components?

Answer 1

When a large application uses a lot of components, it may not make sense to load up all components at the same time from the server. In such a case, Vue allows us to define components that are loaded from the server asynchronously, as and when needed. When declaring or registering components, Vue accepts a factory function that offers a Promise. The component can then be ‘resolved’ when called. 

This saves bandwidth and application bootstrap time by loading only the essentials and deferring async components to their invocation time in the future.

Here’s a simple example of how a component can be made asynchronous. 

new Vue({

    components: {

        ‘tweet-box’: () => import(‘./components/async/TweetBox’)

    }

}); 

When used this way, Webpack’s code splitting feature is employed to deliver this functionality.

<!--[if !supportLists]-->·         <!--[endif]--> 

 

Answer 2

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,

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.