Vite 核心特性分析

本文主要对Vite的核心特性进行记录，也就是Vite的优点。

双引擎架构

Vite的双引擎架构指的是其在开发环境与生产环境分别采用了两套不同的构建引擎：

开发环境（Dev Server）：基于原生ES Module（ESM）的No-Bundle服务。利用浏览器原生支持ES Module的特性，Vite的开发服务器直接将源码中的模块请求（如import React from 'react'）转换成浏览器可以识别的 ES Module 请求。
生产环境（Build）：基于Rollup的打包构建。在构建用于生产环境的代码时，Vite会切换到 Rollup。Rollup是一个成熟且高效的 JavaScript模块打包器，在生成优化后的静态资源（如代码分割、Tree-shaking）方面表现出色。

简单来说，开发用 ESM，生产用 Rollup，这就是 Vite 双引擎架构的核心。

与传统打包器（如Webpack）启动时先打包整个应用不同，Vite的开发服务器直接将源代码中的裸模块导入（如import React from 'react'）交给浏览器处理，这就是Vite在开发环境构建的核心理念No Bundle。

No Bundle有如下好处：

更快的冷启动：No Bundle下只有浏览器请求某个模块时，该模块才会被编译。因此启动时并不需要对整个应用进行全量打包，只需要启动devServer即可，节省了大量时间
更快的HMR：当一个模块失效时（开发者修改代码并保存时），Vite只需要精确地让该模块和其直接依赖的HMR边界链失效。这意味着它只需要处理很少的模块，然后通过WebSocket推送更新消息，浏览器直接发起新的ESM请求获取新模块即可。这个过程的开销与项目总大小无关，只与当前修改的模块本身的大小有关，因此速度极快且稳定。

Vite在首次启动开发服务器时，会先扫描项目源码，识别出用到的第三方依赖（node_modules中的包），然后使用Esbuild将这些依赖的代码提前进行编译和打包。这个过程就是依赖预构建。

依赖预构建的目的有两个：

有如下好处：

兼容非 ESM 格式的依赖
提升加载速度（解决请求瀑布流问题）：许多第三方库会将其内部代码拆分成大量的小文件（例如lodash-es有600+个模块）。如果不做处理，浏览器直接加载这些文件会产生海量的HTTP请求，导致明显的请求瀑布流，拖慢页面加载速度。
优化缓存和后续性能：依赖预构建后的产物存放在node_modules/.vite中，依赖不变的情况下，二次启动无需再次进行依赖预构建（文件系统缓存）

Vite下的HMR的工作流程如下：

服务器与浏览器之间通过WebSocket建立连接。
当文件被修改时，Vite的插件（如vite-plugin-vue）会计算出被影响模块的HMR边界，并通过WebSocket推送一条更新信息通知浏览器重新对模块进行加载。
浏览器接收到信息后，只会动态导入发生变化的模块，而不需要刷新整个页面。这个过程非常快，因为不需要重新打包，只是重新请求了几个独立的模块。

Webpack下的HMR更新的单位是bundle，在项目规模较大的情况下耗时较长，相比之下Vite受益于ESM，能更精确地识别出被修改的单个模块，因此需要增量构建的内容更小。加上esbuild具备更快的构建速度，Vite的HMR的优势是远大于webpack的。

在生产环境下，Vite使用Rollup进行构建。

相较于直接使用Rollup，Vite做了如下增强/简化：