什么是 vite

什么是 vite

vite 是一个基于 Vue3 单文件组件的非打包开发服务器

Vite 原理浅析

这和传统基于打包(例如 Webpack)的开发服务器有什么区别

vite 在开发的时候没有打包的过程，ES 模块源码直接传输给浏览器，浏览器使用自带的 <script module> 进行解析支持，通过 HTTP 请求进行每次 import，开发服务器拦截请求和对需要转换的代码进行转换。

例如：*.vue 文件会在发回浏览器之前进行编译

这样操作有许多优势：

• 开发服务器启动后不需要进行打包操作，启动会变得非常迅速
• 代码在需要的时候进行编译，所以只有代码真正在屏幕上展现的时候才进行编译。开始开发的时候再也不需要等待整个应用编译完成，这对大型应用是一个巨大的改变
• 热模块替换的性能和模块的数量之间的关系解耦，热模块替换变得非常快

导入本地 ES 模块可能会引发深层的导入链路，整个页面重新加载会比依赖打包的开发服务器略慢。然而这是一个本地开发服务器，这部分增加的时间和实际编译的时间相比应该非常小（编译的文件会被缓存在内存中）

vite 的编译本质上还是的 Node.js 中进行，从技术上讲它可以支持打包工具能支持的各种代码转换，没有什么可以阻止你将代码包用于生产，实际上，vite 提供了vite build的脚本用于这个操作，因此不会在生产环境中遭遇到网络流爆炸的问题

当前 vite 尚处于实验性阶段，不适合用于生产环境，但希望有一天能做到这个目标