Javascript is required
Mokkapps Logo

Vue Tip: Speed Up Initial Load Using Async Components

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Feb 4, 2022
1 min read
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 content from me. Alternatively (or additionally), you can also subscribe to my newsletter.