Vite Dev Server and Production Builds

Why Vite Exists

Let me paint the picture. It's 2020. You're working on a large React app with webpack. You save a file. You wait. And wait. The dev server takes 8 seconds to reflect your change. On a cold start, it's 30+ seconds before you can see anything in the browser. Your creative flow is completely shattered.

Evan You (creator of Vue) had the same frustration. He noticed something: browsers now natively support ES modules. What if the dev server just... didn't bundle anything? What if it served your source files directly and let the browser do the module resolution?

That insight became Vite. And it changed how we think about development tooling.

The Native ESM Dev Server

Here's Vite's core trick: during development, it doesn't bundle your application code at all. Instead, it serves your source files as native ES modules over HTTP.

When you open your app in the browser, the browser sees something like:

// What the browser receives from Vite's dev server
import { createApp } from '/node_modules/.vite/deps/vue.js?v=abc123'
import App from '/src/App.vue?t=1234567890'

createApp(App).mount('#app')

The browser's native ESM loader handles the import chain:

1. Browser requests /src/main.js
2. Browser parses the imports, requests /src/App.vue
3. Vite intercepts, transforms the .vue file on the fly, returns JavaScript
4. Browser continues resolving deeper imports

Traditional bundler (webpack):

  Save file → Rebuild entire dependency subgraph → Send full bundle → Reload
  [================== 2-10 seconds ==================]

Vite dev server:

  Save file → Transform single file → HMR update via ESM
  [== 50ms ==]

This is why Vite's cold start is nearly instant regardless of app size. A 10-file app and a 10,000-file app start at roughly the same speed — Vite only processes files the browser actually requests.

Dependency Pre-Bundling with esbuild

There's a wrinkle with the native ESM approach. Imagine you import lodash-es — that's 600+ ES modules. Without any optimization, the browser would fire 600+ individual HTTP requests on page load. That's a performance disaster, even with HTTP/2 multiplexing.

Vite solves this with dependency pre-bundling: the first time you run vite, it scans your source files for bare imports (like import React from 'react'), then uses esbuild to bundle each dependency into a single file.

Before pre-bundling:
  import { debounce } from 'lodash-es'
  → Browser would request 600+ modules from lodash-es

After pre-bundling:
  import { debounce } from '/node_modules/.vite/deps/lodash-es.js'
  → Single file, one HTTP request

Why esbuild? Because it's 10-100x faster than JavaScript-based tools. Pre-bundling lodash-es takes ~15ms with esbuild vs ~1-2 seconds with Rollup. Vite caches the result in node_modules/.vite/deps/ — it only re-runs when your dependencies change (detected via lockfile hash).

Key things pre-bundling handles:

• CommonJS to ESM conversion — many npm packages still publish CJS. esbuild converts them to ESM so the browser can import them
• Module consolidation — packages with many internal modules get collapsed into one file
• Bare specifier resolution — rewrites import 'react' to an actual file path the browser can fetch

HMR Over Native ESM

Hot Module Replacement in Vite works differently from webpack's approach. Since modules are served individually via ESM, HMR can be extremely precise:

The critical difference: webpack HMR sends the updated module code over the WebSocket. Vite HMR sends just the module URL, and the browser fetches the update via a normal HTTP request. This keeps the WebSocket payload tiny and leverages HTTP caching.

Vite's HMR speed doesn't degrade with app size. Whether you have 100 or 10,000 modules, updating a single component takes the same ~50ms because only that one module needs to be transformed and fetched.

Production Builds with Rollup

Here's where Vite makes a pragmatic tradeoff. Native ESM is perfect for development, but for production you still want a bundled output. Why?

1. Network overhead — hundreds of unbundled ESM requests would be slow on real networks, even with HTTP/2
2. Tree shaking — you need a bundler to eliminate dead code across the module graph
3. Code splitting — intelligent chunk splitting requires whole-graph analysis
4. Minification — you want the smallest possible output
5. CSS extraction — CSS needs to be extracted into separate files with proper chunk correlation

Vite uses Rollup for production builds because:

• Rollup produces the smallest, most optimized ESM output
• Rollup's tree shaking is more aggressive than webpack's
• Rollup's plugin ecosystem is mature and well-tested
• Vite's plugin API is a superset of Rollup's, so most Rollup plugins work in Vite

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          charts: ['recharts'],
        },
      },
    },
  },
})

Vite Plugin API

Vite's plugin API extends Rollup's plugin API with additional Vite-specific hooks. If you've written Rollup plugins, you already know most of it.

function myPlugin() {
  return {
    name: 'my-plugin',

    // Rollup-compatible hooks (work in both dev and build)
    resolveId(source) {
      if (source === 'virtual:my-module') {
        return source
      }
    },
    load(id) {
      if (id === 'virtual:my-module') {
        return `export const msg = "Hello from virtual module"`
      }
    },
    transform(code, id) {
      if (id.endsWith('.custom')) {
        return transformCustomFormat(code)
      }
    },

    // Vite-specific hooks (dev server only)
    configureServer(server) {
      server.middlewares.use('/api', myApiMiddleware)
    },
    handleHotUpdate({ file, server }) {
      if (file.endsWith('.md')) {
        server.ws.send({ type: 'full-reload' })
        return []
      }
    },
  }
}

The Rollup compatibility means the Vite plugin ecosystem is massive — thousands of Rollup plugins work out of the box.

Vite vs Webpack DX Comparison