Understanding Native ES Modules and Why Vite Is So Fast

Recently a new project switched its build tool from Webpack to Vite, resulting in a dramatic improvement in development experience: cold start time dropped from over 10 seconds to about 2 seconds (under 1 second with cache) and hot‑module replacement time fell from 2 seconds to under 1 second.

Vite’s speed is attributed to its use of Native‑ESM , which the official site describes simply as a "Native‑ESM powered web dev build tool. It's fast." Native‑ESM means that the JavaScript modules are supported directly by the browser (or Node.js) according to the ES Module specification, without any transformation.

ESM (ECMAScript Module) is the module standard defined by the EcmaScript organization. In the JavaScript ecosystem, EcmaScript is the specification, JavaScript is its implementation, and browsers/Node.js are the runtimes that execute JavaScript code.

Historically, JavaScript moduleization evolved through several stages:

Namespace : wrapping variables in an object to avoid global pollution, but still lacking true encapsulation.

IIFE (Immediately‑Invoked Function Expression) : creating a closure to encapsulate module code.

CommonJS : Node.js‑centric module system where each file is a module and exports are defined via module.exports . Example: // ModuleA.js var id = 1; var getId = function () { console.log(id); }; module.exports = { getId }; // ModuleB.js const moduleA = require("ModuleA.js"); moduleA.getId(); // 1

AMD & CMD : asynchronous module loaders for browsers. AMD (RequireJS) defines modules with a dependency list up front, while CMD (Sea.js) loads dependencies lazily. Example AMD: // moduleA.js define(function () { var id = 1; var getId = function () { console.log(id); }; return { getId }; }); // moduleB.js define(["moduleA"], function (moduleA) { console.log(moduleA.getId()); }); Example CMD: // moduleA.js define(function (require, exports, module) { var id = 1; var getId = function () { console.log(id); }; module.exports = { getId }; }); // moduleB.js define(function (require) { var moduleA = require("moduleA"); console.log(moduleA.getId()); });

UMD : a compatibility wrapper that works with both AMD and CommonJS, allowing a module to run in browsers and Node.js. (function (window, factory) { if (typeof exports === "object") { module.exports = factory(); } else if (typeof define === "function" && define.amd) { define(factory); } else { window.eventUtil = factory(); } })(this, function () { /* module code */ });

ES Module (ESM) : the modern, native module system supported by browsers and recent Node.js versions. Modules are files, imports use the import syntax, and exports can be named or default. // ModuleA.js var id = 1; export const getId = function () { console.log(id); }; // ModuleB.js import * as moduleA from "./ModuleA.js"; moduleA.getId(); // 1

When a browser loads an ES Module, it creates a Module Record containing the source code (AST), the list of requested modules, and the entry point. The record is then turned into a Module Instance through three phases:

Construction : locate, download, and parse the module file into a record.

Instantiation : allocate memory addresses for exported bindings and link imports to those addresses.

Evaluation : execute the top‑level code to initialise values.

Vite’s performance gains come from skipping the heavy local compilation step that bundlers like Webpack perform. In a Webpack workflow, ES Modules are first transpiled to ES5/ES6 by Babel, then bundled, which adds significant latency during cold start. Vite serves the original ES Module files directly to the browser, letting the native module loader handle parsing, thus dramatically reducing startup time.

Hot‑module replacement (HMR) in Vite also operates on native ESM. When a file changes, Vite only needs to reload that module without rebundling the whole application, making HMR much faster than in bundle‑based dev servers.

In summary, JavaScript’s module system has progressed from IIFE‑based patterns to robust standards like CommonJS, AMD/CMD, and finally native ES Modules. ES Modules are now the preferred way to organise code for both browsers and Node.js. Tools like Vite exploit native ESM, together with ESBuild and smart caching, to provide a bundless development experience that greatly improves developer productivity.

References:

用 Vite 加速你的生产力: https://segmentfault.com/a/1190000040422503

深入浅出 JavaScript 模块化: https://github.com/Nealyang/PersonalBlog/issues/61

前端模块化开发那点历史: https://github.com/seajs/seajs/issues/588

ES modules: A cartoon deep‑dive: https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/