Beginner LevelVue JS
How does defineAsyncComponent enable lazy loading and code splitting in Vue?
❓ Interview Prompt: Explain lazy loading components with defineAsyncComponent, dynamic imports, loading/error fallback states, and bundle optimization.
Loading heavy components (like rich text editors or chart visualizers) on initial page load increases bundle size and slows down initial page render.
'defineAsyncComponent()':
Lazy-loads a component JavaScript chunk only when the component is actually rendered on screen:
•
Bundlers (Vite/Webpack) automatically split the async component into a separate JavaScript bundle.
•
Supports configuring custom loading spinners and error fallback components!
Code Implementation Example
javascript
import { defineAsyncComponent } from 'vue';
import LoadingSpinner from './LoadingSpinner.vue';
import ErrorCard from './ErrorCard.vue';
// Lazy-load heavy Chart component only when rendered!
const HeavyChart = defineAsyncComponent({
loader: () => import('./HeavyChart.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorCard,
delay: 200, // Show loading component after 200ms
timeout: 5000 // Error out if fetch takes > 5 seconds
});💡Lazy loading heavy components with defineAsyncComponent and fallback UI states.
🎯 Interview Key Takeaway
Use defineAsyncComponent() to code-split heavy components into separate bundle chunks loaded lazily on demand.
#defineAsyncComponent#Lazy Loading#Code Splitting#Beginner
Back to all Vue JS Questions→