vite
ES6 module + rollup-based for production
浏览器原生支持,实现无刷更新。
Vite & VitePress @ Vue Toronto 2020 - Google 幻灯片
静态资源处理,借助 npm & CDN
旧页面 301 重定向到新页面
与 webpack 比较
定位不同,vite 是上层工具链,依赖 rollup,而 webpack 与 rollup 对标
ES module based dev server VS Bundle based dev server
- 全量打包,项目越大,打包越慢
- 解析每个文件的导入导出关系
- 排序、重写,连接模块
- 代码分割是针对生产环境
问题,模块多,HTTP 请求多
- 预打包依赖,一个依赖一个请求
- etag & 304
- 代码分割,ES module 同时支持 dev & prod
依赖预构建
原因
- 兼容性,cjs/umd 转为 esm
- 性能,减少请求数