Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Speed Up Initial Load Using Async Components

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Feb 4, 2022
1 min read
|
117 views
Performance
Vue Tip: Speed Up Initial Load Using Async Components Image

The traditional, synchronous way of loading components is:

import MyComponent from './MyComponent.vue'

In large applications, it makes sense to split the code into smaller chunks and only load it from the server when needed.

Vue 3 therefore provides the defineAsyncComponentfunction:

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {  return new Promise((resolve, reject) => {    // ...load component from server    resolve(/* loaded component */)  })})

Now we can use AsyncComp as a standard component in Vue.

Here are the docs for Async Components in Vue 3.

The syntax for Vue 2 is not that different:

const AsyncComponent = () => import('./components/LazyLoadingFTW.vue')

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.