vite

vite速度快的原因

Vite冷启动快和热更新快
1：冷启动快：不打包用原生的esm和esbuild按需编译
在开发环境下，vite不打包，它把源代码以ESM的模式交给浏览器处理，不需要将文件打包成一个bundle。当浏览器遇到import文件时，会发送http请求，vite负责拦截请求并按需编译并返回，比如TS->JS/VUE SFC->JS。对比webpack需要遍历所有文件，生成完整的依赖图，再打成一个bundle,才能启动服务器，vite的冷启动几乎是毫秒级别的，且与项目大小无关。
Vite利用esbuild进行依赖预构建。对于第三方的依赖，如React loadash等通常是commonjs或者umd格式发布的，浏览器不识别。vite在首次启动时，对node_modules里的第三方依赖进行格式转换，将commonjs/umd转化为esm格式，以及文件合并，减少http请求。对比babel速度快10-100倍，同时只预构建一次，后续无开销。

2：热更新快
开发环境下，由于vite基于ESM模式，所以能精准知道模块之间的依赖关系。当文件修改时，vite会重新编译编译该文件，浏览器会自动更新，无需刷新页面。对比webpack需要重新生成依赖图，vite的热更新速度非常快。

Vite打包快
在生产环境下，vite使用rollup打包，速度快，体积小。