Vite has become the standard frontend build tool, with its own vocabulary around native ESM, plugins, and production bundling. These terms appear constantly in frontend architecture discussions.
0 / 5 completed
1 / 5
A developer says: 'Vite uses native ESM in development mode.' What does this mean?
Native ESM (ES Modules) means Vite serves source files directly to the browser using the browser's built-in import support — no bundling happens in development. The browser requests each module independently. This is why Vite starts so fast — it skips the bundling step. In contrast, production builds are still bundled via Rollup. In discussions: 'Vite uses native ESM' explains why dev server startup is near-instant regardless of project size.
2 / 5
A developer mentions: 'Vite uses Rollup for production builds.' What is Rollup?
Rollup is a JavaScript module bundler known for excellent tree-shaking (removing unused code) and clean ES module output. Vite uses Rollup under the hood for production builds because it produces highly optimised, minimal bundles. In architecture discussions: 'Rollup handles the production bundle' distinguishes the dev experience (native ESM) from the prod output (Rollup-bundled).
3 / 5
A PR comment says: 'Write a Vite plugin to transform these SVG files.' What is a Vite plugin?
A Vite plugin uses Rollup's plugin API with Vite-specific hooks. Plugins can transform files (e.g., convert SVG to React components), inject code, or modify the build. Common plugins: @vitejs/plugin-react, vite-plugin-pwa. In discussions: 'write a Vite plugin' means create a configuration object that hooks into Vite's build/transform pipeline.
4 / 5
A developer says: 'Use code splitting via dynamic imports to reduce the initial bundle size.' What does code splitting mean?
Code splitting divides your JavaScript bundle into multiple smaller chunks. Dynamic import() tells Vite/Rollup to split at that point — the imported module loads only when needed. This reduces the initial bundle size, improving Time to Interactive. In performance discussions: 'add code splitting' means use import() for routes, modals, or heavy libraries that aren't needed immediately.
5 / 5
A developer says: 'Vite's HMR is much faster than webpack's.' What is HMR in a build tool context?
HMR (Hot Module Replacement) updates only the changed module in the browser without reloading the page. Vite's HMR is fast because it only re-processes the changed file (not the whole bundle) and uses native ESM for instant updates. In DX (developer experience) discussions: 'fast HMR' means developers see code changes reflected immediately, preserving application state across edits.