Vite 概念与设计思想

Question

Vite 由两部分组成：

• 一个开发服务，服务与开发环境，ESM + HMR
• 一套构建指令，服务于生产环境，用 Rollup

Vite 将模块区分为依赖和源码两类，提升开发服务启动时间

依赖：在开发时不会变动的纯 JavaScript， Vite 会使用esbuild（esbuild 用 go 编写）预构建依赖

源码： 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑，如 JSX、CSS 或者 Vue SFC 等。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite 以原生 ESM 方式提供源码，让浏览器接管打包工作

1. 开发环境中的 Vite 和 Webpack

发现主要有如下不同：

Webpack	Vite
先打包生成 bundle，再启动开发服务器	先启动开发服务器，利用新一代浏览器的 ESM 能力，无需打包，直接请求所需模块并实时编译
HMR 时需要把改动模块及相关依赖全部编译	HMR 时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求
内存高效利用	-

因此，针对开发环境中的启动慢问题，Vite 开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时不需要对所有资源打包，只是使用 esbuild 对依赖进行预构建。而 Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

2.vite 如何保持快速更新

Vite 利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：

• 源码模块的请求会根据 304 Not Modified 进行协商缓存
• 依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

3. index.html 入口文件 与 项目根目录

在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。Vite 也支持多个 .html 作入口点的 多页面应用模式 。

指定替代根目录

vite 以当前工作目录（ package.json 所有目录）作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。注意 Vite 同时会解析项目根目录下的 配置文件（即 vite.config.js） ，因此如果根目录被改变了，你需要将配置文件 ( vite.config.js ) 移动到新的根目录下。

4. 热更新原理

Vite 的热加载原理，其实就是在客户端与服务端建立了一个 websocket 连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新。

• 服务端：服务端做的就是监听代码文件的改变，在合适的时机向客户端发送 websocket 信息通知客户端去请求新的模块代码。
• 客户端：Vite 中客户端的 websocket 相关代码在处理 html 中时被写入代码中。

5.vite 为什么开发使用 esbuild，生产使用 rollup?

开发效率和即时重建速度： esbuild 是一个极其快速的 JavaScript 打包工具，它的速度比 rollup、Webpack 等工具都要快很多。在开发过程中，快速的重建速度意味着更快的开发反馈，这对于提高开发效率非常重要。

主要用来预编译第三方依赖和编译 业务代码里的 typescript 代码。esbuild 在抹平了第三方依赖的语法差异（第三方依赖不一定是 ESM 的语法）的同时，保证了 vite dev 的开发速度。

1. 生产环境优化和特性支持： rollup 在生产环境下拥有更多的优化和特性支持，尤其是在对于更复杂的项目结构、代码拆分和优化方面。rollup 在这方面有着更丰富的生态系统和插件支持，能构建生产环境可稳定使用兼容性更高的包，更好地满足生产环境的需求。
2. 经过时间的考验： rollup 是一个成熟的打包工具，在很长一段时间内被广泛使用和测试，已经被证明在生产环境中是非常稳定和可靠的。

因此，Vite 选择了在开发环境下使用 esbuild 提供快速的开发体验，并在生产环境下使用 rollup 进行更严格的优化和生产准备。这种组合可以兼顾开发效率和生产环境的性能需求，是一个很好的权衡选择。