Senior LevelVue JS
How does Vite optimize module loading using <link rel="modulepreload"> and chunk partitioning?
❓ Interview Prompt: Explain Vite module preloading, <link rel="modulepreload"> injection, vendor chunk partitioning, and Rollup output optimization.
Modern browsers support preloading ES modules before execution using '<link rel="modulepreload">'.
Vite Optimization Mechanics:
1
Preload Injection: Vite automatically injects '<link rel="modulepreload">' tags for all imported JS dependencies of an entry chunk, allowing the browser to download and parse vendor modules in parallel.
2
Chunk Partitioning: Configure 'rollupOptions.output.manualChunks' to separate large vendor packages (Pinia, Vue Router, Chart.js) into stable long-term cacheable chunks!
Code Implementation Example
javascript
// vite.config.js — Vendor Chunk Partitioning
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-vue': ['vue', 'vue-router', 'pinia'],
'vendor-charts': ['chart.js']
}
}
}
}
};💡Configuring Rollup manualChunks partitioning in Vite.
🎯 Interview Key Takeaway
Vite injects modulepreload tags and partitions vendor chunks to optimize parallel module parsing and caching.
#Vite#modulepreload#Bundle Optimization#Senior
Back to all Vue JS Questions→