三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

深入理解 Vite 的打包机制

深入理解 Vite 的打包机制

要深入理解 Vite 的打包机制,我们需要分两个维度来看:开发环境(Dev)的“非打包”模式,以及生产环境(Build)的“统一打包”模式。

随着Vite 8(2026年主流版本)的发布,Vite 完成了从“esbuild + Rollup”双引擎向Rolldown统一引擎的重大跨越。

开发环境:从“不打包”到“按需实时转换”

传统的打包工具(如 Webpack)在启动开发服务器前,必须先扫描整个依赖图并进行打包。而 Vite 采用了截然不同的No-Bundle哲学:

原生 ESM 驱动

Vite 充分利用了现代浏览器对原生ES Modules (ESM)的支持。当你打开页面时:

  1. 浏览器遇到import语句,会直接向 Vite 开发服务器发起 HTTP 请求。
  2. Vite 只在请求到达时才对该文件进行转换(比如将 TS 转为 JS,或者处理 CSS Modules)。
  3. 这使得服务器启动速度与项目大小解耦,无论项目多大,启动都是毫秒级的。

依赖预构建 (Dependency Pre-bundling)

虽然源码是按需加载的,但第三方库(如 React、lodash)通常有成百上千个内部模块。如果浏览器发起几千个请求,性能会崩溃。

  • Vite 8 做法:使用Rolldown(基于 Rust)自动将这些分散的依赖打包成单个或少数几个 ESM 模块。
  • 目的:一是减少网络请求,二是将 CommonJS/UMD 转换为浏览器能识
← 返回列表