vite学习记录

Vite 官方中文文档
rollup.js 中文文档

vite解决服务器启动缓慢问题：

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

依赖 大多为在开发时不会变动的纯
JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者
CommonJS）。

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快
10-100 倍。

源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte
组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite
只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

vite实现原理

vue3构建工具vite原理 之 手写vite

1. 重写引入模块路径前面加上/@modules/, 重写后浏览器会再次发送请求
   拦截含有/@modules/的请求, 去node_modules引入对应的模块并返回
2. koa中间件检测到请求的是vue模板文件，则会在请求后面添加一个type=template参数，
   koa通过这个参数来判断是请求vue模板文件，并编译成js文件返回给浏览器
3. 静态服务插件 实现可以返回静态文件的功能

app.use(static(root))
app.use(static(path.resolve(root, 'public')))