vite知识点

使用 vite

使用 npm:

1
npm create vite@latest

使用 yarn:

1
yarn create vite

使用 pnpm:

1
pnpm create vite

vite 基于 ESM,因此实现了快速启动和即时模块热更新;
vite 在服务器端实现了按需编译。
开发者在代码中写到的 ESM 导入语法会直接发送给服务器,服务器也直接将 ESM 模块内容运行处理下发给浏览器。接着浏览器通过解析 script modules 向每一个导入的模块发起 HTTP 请求,服务器继续对这些 HTTP 请求进行处理并响应。
在开发模式下,vite 通过 runServe 方法启动一个 koaServer,实现对浏览器请求的响应,runServer 方法实现如下:

1
const server = require('./server').createServer(options)

Vite 实现原理

  1. Vite 利用浏览器原生支持 ESM 这一特性,省略了对模块的打包,不需要生成 bundle,因此初次启动更快,对 HMR 机制支持友好。
  2. 在 Vite 开发模式下,通过启动 Koa 服务器在服务器端完成模块的改写(比如单文件的解析编译)和请求处理,可实现真正的按需编译。
  3. Vite Server 的所有逻辑基本都依赖中间件实现。这些中间件拦截请求之后完成了如下操作。
    • 处理 ESM 语法,比如业务代码中的 import 第三方依赖路径转为浏览器可识别的依赖路径。
    • 对.ts、.vue 文件进行即时编译。
    • 对 Sass/Less 需要预编译的模块进行编译。
    • 和浏览器建立 Socket 连接,实现 HMR。

Vite HMR 实现原理

Vite 的 HMR 特性,主要是由以下步骤实现的:

  1. 通过 watcher 监听文件改动。
  2. 通过服务器端编译资源,并推送模块内容给浏览器。
  3. 浏览器收到新的模块内容,执行框架层的 render/reload 操作。