使用 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 实现原理
- Vite 利用浏览器原生支持 ESM 这一特性,省略了对模块的打包,不需要生成 bundle,因此初次启动更快,对 HMR 机制支持友好。
- 在 Vite 开发模式下,通过启动 Koa 服务器在服务器端完成模块的改写(比如单文件的解析编译)和请求处理,可实现真正的按需编译。
- Vite Server 的所有逻辑基本都依赖中间件实现。这些中间件拦截请求之后完成了如下操作。
- 处理 ESM 语法,比如业务代码中的 import 第三方依赖路径转为浏览器可识别的依赖路径。
- 对.ts、.vue 文件进行即时编译。
- 对 Sass/Less 需要预编译的模块进行编译。
- 和浏览器建立 Socket 连接,实现 HMR。
Vite HMR 实现原理
Vite 的 HMR 特性,主要是由以下步骤实现的:
- 通过 watcher 监听文件改动。
- 通过服务器端编译资源,并推送模块内容给浏览器。
- 浏览器收到新的模块内容,执行框架层的 render/reload 操作。