How Vite Accelerates Frontend Development with Fast Builds & Hot Reload

1 Vite: A New Faster Web Development Tool.

2 Features:

Fast cold start

Instant module hot update (preserve state, only update changed parts, faster style adjustments)

True on-demand compilation

3 Build Project:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

4 Implementation Mechanism:

Vite uses koa as web server, uses clmloader to create a watcher for file changes, and implements a plugin mechanism that combines koa-app, watcher and other tools into a context object injected into each plugin.

Context composition structure:

Plugins retrieve components from the context; some add middleware to koa, others use the watcher to monitor file changes. This plugin mechanism clarifies the application structure and responsibilities.

5 Plugins:

User-injected plugins – custom plugin

hmrPlugin – handles HMR

htmlRewritePlugin – rewrites script content in HTML

moduleRewritePlugin – rewrites import statements in modules

moduleResolvePlugin – obtains module content

vuePlugin – handles Vue single‑file components

esbuildPlugin – uses esbuild to process resources

assetPathPlugin – handles static assets

serveStaticPlugin – serves static resources

cssPlugin – processes css/less/sass imports

…

A simple plugin that intercepts JSON files:

interface ServerPluginContext {
  root: string
  app: Koa
  server: Server
  watcher: HMRWatcher
  resolver: InternalResolver
  config: ServerConfig
}

type ServerPlugin = (ctx: ServerPluginContext) => void;

const JsonInterceptPlugin: ServerPlugin = ({app}) => {
  app.use(async (ctx, next) => {
    await next()
    if (ctx.path.endsWith('.json') && ctx.body) {
      ctx.type = 'js'
      ctx.body = `export default json`
    }
  })
}

6 Dependency Runtime Principle

Vite separates modules into dependencies and source code at startup, improving dev server launch time.

Dependencies are mostly pure JavaScript that do not change during development. Large dependencies are pre‑bundled using esbuild , which is written in Go and is 10–100× faster than JavaScript bundlers.

Source code may contain JSX, CSS, Vue/Svelte components, etc., and needs transformation. Vite serves source code via native ESM, letting the browser handle module loading and on‑demand conversion.

6.1 Dependency ES module

Understanding Vite requires knowing what an ES module is. Browsers support export and import in type="module" scripts.

6.2 Example

// **module script** allows native modules in the browser
<script type="module">
  // index.js can export modules and import other dependencies
  // when encountering an import, the browser makes an HTTP request for the module file.
  import { fn } from ./index.js;
  fn();
</script>

When the HTML includes this script, the browser requests the module via HTTP, receives the exported function, and executes it.

export function fn() {
  alert('hello world');
};

7 Role of Vite in the Project

Viewing the source of a running Vite project shows a script like:

<script type="module">
  import { createApp } from '/@modules/vue'
  import App from '/App.vue'
  createApp(App).mount('#app')
</script>

This demonstrates that Vite serves Vue via the @modules prefix, uses native ES modules to run the app directly in the browser, eliminating the bundling step and enabling on‑demand loading.

Remove the bundling step.

Achieve on‑demand loading.

7.1 Removing the Bundling Step

Traditional bundlers assemble modules into a bundle and inject glue code (e.g., webpack’s __webpack_require__). Vite skips this by relying on native module support.

7.2 Implementing On‑Demand Loading

Unlike static bundling, Vite can dynamically import modules only when needed, avoiding unnecessary code in the bundle.

8 How Vite Handles ESM

Vite provides a web server (koa) that proxies module requests and rewrites import paths with an @modules prefix.

8.1 What Is @modules?

Vite rewrites imports such as import { createApp } from 'vue' to import { createApp } from '/@modules/vue' so the browser can fetch the module.

Capture request body in koa middleware.

Parse import statements using es-module-lexer.

Identify absolute paths as npm modules.

Return rewritten path like "/@modules/vue".

8.2 Why @modules Is Needed

Browsers cannot directly access node_modules; the prefix allows Vite to serve those packages after processing.

8.3 Returning Module Content

Vite matches @modules paths, uses require('...') to load the package, and returns the compiled content to the browser.

9 Vite Hot Update Implementation

Vite’s HMR plugin checks for the path “/vite/hmr” and serves the client HMR code.

app.use(async (ctx, next) => {
  if (ctx.path === '/vite/hmr') {
    ctx.type = 'js'
    ctx.status = 200
    ctx.body = hmrClient
  }
})

HMR consists of four parts: server framework support, file watcher, server‑side compilation and push, and client‑side execution.

10 Remarks by Evan You

Vite is a development server based on native ES imports, performing on‑demand compilation, fast hot updates, and can be bundled with Rollup for production.

References

koa: https://www.npmjs.com/package/koa

esbuild: https://esbuild.github.io/

Pre‑bundling dependencies: https://cn.vitejs.dev/guide/dep-pre-bundling.html

Native ESM: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

JavaScript modules – MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

ES module pitfalls: https://zhuanlan.zhihu.com/p/40733281