本文整理拓展自 Jinjiang 老师的分享 深入理解单文件组件编译，相关项目地址 vlite、vue-simple-compiler。
一、Vlite 是什么
vlite 是支持 typeScript、tsx、jsx、vue、react、vanilla 的静态服务器，专为 demo / 组件设计的静态服务器，使用方法类似 http-server 或 serve，设计灵感来自 vite。
二、Vlite 原理
2.1 $ vlite
当浏览器请求一个单文件组件时， 服务器会将其编译为一个 ES 模块（vue 调用 vue-simple-compiler 编译）。react demo 如下，vue demo 可见 jinjiang 老师的分享 深入理解单文件组件编译 p58~59。
编译前：
编译后：
2.2 $ vlite build
vlite 可以给每个源代码文件都额外生成一个可用的静态资源文件名。这样它们就可以输出为逐一对应的静态文件供 http-server 或 serve 使用。
2.3 $ vlite bundle
可以进一步将输出的静态文件打包成一个整体，内部使用了 rolldown（rolldown 是基于 Rust 且兼容 Rollup.js API 的打包工具，可查看 Vite's Next 2.2 进一步了解）。
三、Vlite 能力
- 零配置
- esm 友好
- 简洁直接的编译，支持 bundle
- 不需要安装 node_modules 依赖（引入的包会被重定向到 esm.sh）
- 支持 vue、react、vanilla
- 支持 typeScript、jsx、tsx
- 支持 css、scoped css
