in Vue.JS by

1 Answer

0 votes

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]--> 


Related questions

0 votes
asked Oct 9, 2019 in Vue.JS by Indian
0 votes
0 votes
asked Oct 9, 2019 in Vue.JS by Indian
+1 vote
asked Jun 25, 2019 in Dot Net by Venkatshastri