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.
‘tweet-box’: () => import(‘./components/async/TweetBox’)
When used this way, Webpack’s code splitting feature is employed to deliver this functionality.
<!--[if !supportLists]-->· <!--[endif]-->