【前端工程化面试题】简单说一下 vite 的原理

要回答这个问题，首先要知道的知识点有：

1. 现代浏览器对 esm 模块原生支持，参考这篇文章
2. vite 是基于模块的构建工具
3. vite 相比于其他的构建工具(比如：webpack)的优势在于开发阶段的优化: 快速启动，快速热更新
4. 然后重点要看一下 vite 官网 ，本篇文章大部分内容来自官网。

注意，vite 和webpack 一样，都有一个开发服务器，客户端都是浏览器，这个开发服务器是构建工具功能，普通的开发者你不研究是看不到的，这个是构建工具源码的功能。

用自己的语言总结一下：

首先在开发阶段

1.  使用 esbuild 对依赖进行预构建，esbuild 的打包速度很快。

   1. 依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。

2. 利用了现代浏览器对 esm 原生支持这一特性，以 原生 ESM 方式提供源码，这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码，根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

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

3. 按需加载：在浏览器执行 esm 的 import 时，浏览器会向开发服务器请求该模块。

4. 热更新是基于 websocket 实现的，也是在 esm 上执行的，只更新编辑了的文件，而不是把整个页面重新编译。

   1. 在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

5. vite 使用 http 缓存来加速页面的重新加载，源码模块会进行协商缓存，依赖模块会进行强缓存。

在生产环境

1. 使用 rollup 进行打包，因为rollup 和vite 的api 能够很好的兼容，而且社区比较活跃，有很多插件可以使用。这一点在 vite官网有提到。
2. 需要打包而不是继续和开发环境一样使用esm 因为，发布未打包的esm效率很低，所以还是需要对代码进行优化，tree-shaking、懒加载和分割等优化。

具体的看 vite 官网的这一页内容，就可以。

为什么选 Vite | Vite 官方中文文档