Vite 是 vue的作者尤雨溪开发的打包工具，目前亮点是本地开发时热加载编译极快，在大型项目中体验较好。
Vite 主要对应的场景是开发模式，跳过打包按需加载，因此热更新的速度非常快；
在大型项目上可以有效提高本地开发编译打包的速度，解决 “改一行代码等半天” 问题；
浏览器解析 imports，利用了 type="module" 功能，然后拦截浏览器发出的 ES imports 请求并做相应处理；
生产模式是用 rollup 打包，这里后续应该会做优化；
一、现代浏览器的模块功能
将script标签的type属性设置为module，那么在js中就可以使用模块功能(import '**.js')，es6兼容性为IE11及以下不支持，从 Vue3 的 proxy 和 Vite 的模块，可以看出尤大是彻底放弃 IE 了。
二、拦截http请求
针对不同类型的文件做不同的处理
1. js文件
用 es-module-lexer 来对 js 进行的语法分析获取 imports 数组（依赖分析），然后将import语法替换为请求对应的js文件。
原代码：
转换后：
2. vue文件
vue单文件组件包含的三个部分 template、script、style, Vite 会将单文件组件分成三个部分分别请求，以及做相应处理。
2.1 template
Vite 将 template 编译成 render 函数后返回。
2.2 script
分析 js 中的 import 依赖，重新发起请求。
2.3 style
将 style 编译成 css 插入head中。
原本的 App.vue 文件是
转换后变成了：
三、热更新
Vite 的是通过 WebSocket 来实现热更新通信，当代码改动以后，通过 websocket 仅向浏览器推送改动的文件。
因此 Vite 本地热更新的速度不会受项目的大小影响太多，在大型项目中本地开发速度快。
Vite 的客户端热更新代码是在 app.vue 文件编译过程中，将代码注入进去的。
四、Vite 和 vue-cli 的优缺点对比
| Vue CLI 优点 | Vue CLI 缺点 |
|---|---|
| 经历过战斗考验，可靠 | 开发服务器速度与依赖数量成反比 |
| 与 Vue 2 兼容 | |
| 可以捆绑任何类型的依赖关系 | |
| 插件生态系统 | |
| 可以针对不同的目标进行构建 |
| Vite 优点 | Vite 缺点 |
|---|---|
| 开发服务器比 Webpack 快 10-100 倍 | 只能针对现代浏览器（ES2015+） |
| 将 code-splitting 作为优先事项 | 与 CommonJS 模块不完全兼容 |
| 处于测试阶段，仅支持 Vue 3 | |
| 最小的脚手架不包括 Vuex、路由器等 | |
| 不同的开发服务器与构建工具 |
0条评论
点击登录参与评论