Vite 打包

vite打包原理

总结

利用了 现代浏览器 对 ES 模块（ESM）的支持，提供了快速的 **冷启动 **和 热更新 (热模块替换（HMR）)。

开发环境下: Vite 充当一个开发服务器，直接利用浏览器对 ESM 的支持, 通过动态编译动和打包对应的模块

生产环境下: 利用 Rollup 进行打包

Vite 还利用 esbuild 对不常变动的第三方依赖进行预构建，并进行缓存，以提高构建速度。

• 热更新: 利用 WebSocket* 与客户端建立连接

冷启动（Cold Start）通常指的是从零开始启动一个应用程序的过程。

拓展

1. Vite：

• Vite 是一个新型的前端构建工具，由 Vue.js 的作者尤雨溪创建。它利用了现代浏览器对 ES 模块（ESM）的支持，提供了快速的冷启动和热模块替换（HMR）。

• 在开发环境下，Vite 充当一个开发服务器，直接利用浏览器对 ESM 的支持，按需编译模块，无需打包整个项目，从而实现了快速的服务器启动和响应。

• 在生产环境下，Vite 使用 Rollup 进行打包，生成高效的静态资源。Vite 还利用 esbuild 对不常变动的第三方依赖进行预构建，并进行缓存，以提高构建速度。

• Vite 的热更新实现是按需编译，按模块更新，而 Webpack 需要全部重新编译并更新 。

Vite 是一个现代化的前端构建工具，它通过利用浏览器原生的 ESModule 支持，提供了快速的开发服务器和优化的生产构建。下面是 Vite 的打包原理和一些关键特性：

1. 开发服务器：Vite 在开发环境下不进行打包编译，而是启动一个本地的 devServer。当请求页面时，Vite 会根据请求动态编译和打包对应的模块，然后返回给浏览器。这种方式使得项目启动速度非常快，理论上与项目大小无关。

2. 利用 ESModule：Vite 利用现代浏览器对 ESModule 语法的支持，避免了传统打包工具的静态打包和编译，从而提高了开发效率和构建速度。

3. 生产打包：在生产环境下，Vite 使用 Rollup 进行打包。Rollup 是一个基于 ESModule 的打包器，它生成的打包文件通常比 Webpack 小，且打包速度快。

4. 依赖预构建：Vite 在预构建阶段使用 esbuild 将依赖中的 CommonJS、UMD 等模块化规范转换为 ESM，以提供给浏览器。这样可以减少模块请求次数，提高网络加载性能。

5. 按需加载：Vite 实现了真正的按需加载，服务器只在接受到 import 请求时才会编译对应的文件，并将 ESM 源码返回给浏览器。

6. 缓存策略：Vite 利用 HTTP 缓存和文件系统缓存来提升性能。依赖部分使用强缓存，源码部分使用协商缓存，以提升页面打开速度。

7. 重写模块路径：Vite 使用 es-module-lexer 扫描 import 语法，并通过 magic-string 重写模块的引入路径，以适应浏览器的模块加载方式。

8. 热更新：Vite 通过 WebSocket 与客户端建立连接，实现热模块替换（HMR）。当文件被修改时，服务器会通知客户端进行相应的代码更新。

9. 配置简洁：Vite 的配置非常简洁，可以轻松地配置和定制，提供了一个易于使用的 CLI，可以轻松地创建和管理 Vite 项目。

10. 社区支持：Vite 拥有庞大的社区支持，有许多开源项目和插件可供使用，满足用户的不同需求。

总的来说，Vite 的打包原理主要依赖于现代浏览器对 ESModule 的支持，通过动态编译和打包以及优化的缓存策略，提供了快速的开发体验和高效的生产构建。