Vite Principles, Implementation, and Migration Guide

The author introduces Vite, a next‑generation frontend development and build tool, and explains why its fast server startup, lightweight hot module replacement (HMR), and use of native ES modules (ESM) make it superior to traditional bundlers like Webpack.

Key technical concepts are covered: Vite serves source files directly using a Node server, leverages esbuild for ultra‑fast JSX/TSX transformation, and rewrites bare module imports to a /@modules/ namespace. The article shows a minimal Koa server that serves index.html , processes .jsx files with esbuild , handles CSS by injecting a <style> tag, and converts SVGs to base64 data URLs.

import Koa from 'koa';
const app = new Koa();
app.use(async ctx => {
  const url = ctx.request.url;
  if (url === '/') {
    const html = fs.readFileSync(`${__dirname}/index.html`, 'utf-8');
    ctx.type = 'text/html';
    ctx.body = html;
  }
  // ...handle .jsx, .css, .svg, and /@modules/ requests
});
app.listen(24678, () => console.log('App is running'));

HMR is implemented by injecting a small WebSocket client into the HTML response. The server watches source files with chokidar and notifies the client to reload the changed module by appending a timestamp query string.

const footer = `
`;
ctx.body = `${html}${footer}`;

To migrate an existing Webpack project, the author outlines three steps: install Vite, create vite.config.js (including alias configuration), and run the Vite dev server. Several migration challenges (Q1‑Q9) are discussed, such as converting .js files containing JSX to .jsx , handling alias conflicts, fixing bare‑module imports, removing the ~ prefix in Less files, defining global for legacy scripts, and making Ant Design styles work with Vite.

import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    alias: [
      { find: /^@src/, replacement: resolve(__dirname, './src') },
      { find: /^~/, replacement: '' },
      { find: 'venn.js', replacement: resolve(__dirname, './node_modules/venn.js/build/venn.js') }
    ]
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://admediatest.58v5.cn',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

Performance tests show dramatic improvements: Vite starts the project in 0.5 s versus 33 s for Webpack (66× faster), first‑screen rendering in 19 s versus 36 s (1.9×), and HMR updates in 0.2 s versus 6 s (30×).

Vite

Webpack

Speed‑up

Start Project

0.5 s

33 s

66×

First Screen

19 s

36 s

1.9×

HMR

0.2 s

6 s

30×

In conclusion, Vite provides a fast, unbundled development experience that significantly reduces startup and HMR latency. While production builds may still rely on Webpack for legacy compatibility, the author recommends adopting Vite for modern frontend development and continuing to explore its unbundled capabilities.