简介

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

1. 一个开发服务器：基于原生 ES 模块的开发服务器，能够快速启动开发服务，并且实现速度快到惊人的模块热更新（HMR）
2. 一套构建指令：基于 Rollup 打包源码，并且是预配置的，，可输出用于生产环境的高度优化过的静态资源

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

基本原理

首先 Vite 分为开发模式和生产模式：

开发模式：

Vite 提供了一个开发服务器，基于原生的 ESM，当代码中出现 import 的时候，发送一个资源请求，Vite 服务器拦截请求，根据不同文件类型，在服务端完成模块的改写（比如单文件的解析编译等）和请求处理，实现真正的按需编译，然后返回给浏览器。请求的资源在服务器端按需编译返回，完全跳过了打包这个概念，不需要生成一个大的 bundle。服务器随起随用，所以开发环境下的初次启动是非常快的。而且热更新的速度不会随着模块增多而变慢，因为代码改动后，并不会有 bundle 的过程。

Vite 拦截请求之后会做以下事情：

• 处理 ESM 语法，比如将业务代码中的 import 第三方依赖路径转为浏览器可识别的依赖路径
• 对 .ts、.vue 等文件进行即时编译
• 对 Sass/Less 的需要预编译的模块进行编译
• 和浏览器端建立 socket 连接，实现 HMR

生产模式：

利用 Rollup 来构建源代码。

插件体系