亮亮的笔记本

# Vite 原理

  • 快速的冷启动: No Bundle + esbuild 预构建
  • 即时的模块热更新: 基于 ESM 的 HMR，同时利用浏览器缓存策略提升速度
  • 真正的按需加载: 利用浏览器 ESM 支持，实现真正的按需加载

Vite 相比于 Webpack 而言，没有打包的过程，而是直接启动了一个开发服务器 devServer。Vite 劫持浏览器的 HTTP 请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。

# 使用 Esbuild 预构建

Vite 底层使用 Esbuild 实现对..ts.jsx.js 代码文件的转化

# 生产打包 Rollup

Rollup 是基于 ESM 的 JavaScript 打包工具。相比于其他打包工具如 Webpack，他总是能打出更小、更快的包。因为 Rollup 基于 ESM 模块，比 Webpack 和 Browserify 使用的 CommonJS 模块机制更高效率

# 核心原理

Vite 其核心原理是利用浏览器现在已经支持 ES6 的 import,碰见 import 就会发送一个 HTTP 请求去加载文件，Vite 启动一个 koa 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以 ESM 格式返回返回给浏览器。

# 基于 ESM 的 HMR 热更新

主要是通过 WebSocket 创建浏览器和服务器的通信监听文件的改变，当文件被修改时，服务端发送消息通知客户端修改相应的代码，客户端对应不同的文件进行不同的操作的更新

# 基于 Esbuild 的依赖预编译优化

# 为什么需要预构建？

  • 支持 commonJS 依赖

    因此必须将 commonJs 的文件提前处理，转化成 ESM 模块并缓存入 node_modules/.vite

  • 减少模块和请求数量

对于一些第三方依赖，相互依赖了很多文件，需要单独处理转换为单个模块

# 为什么是 Esbuild

快

  • 使用 Go 语言编写 在 CPU 密集场景下，Go 更具性能优势
  • 多线程优势
  • 对构建流程进行了优化，充分利用 CPU 资源

参考文章：

← 性能优化 →