Vue Tip: Speed Up Initial Load Using Async Components

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 defineAsyncComponent
function:
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