Mokkapps Logo

Vue Tip: Speed Up Initial Load Using Async Components

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
February 04, 2022
1 Minuten Lesezeit
|
- Ansichten

The regular, 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 it’s 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 to use AsyncComp like a normal 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 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.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github