很多前端框 VUE React 都是使用webpack 打包
为何使用 vite
- webpack 打包很慢,热更不友好
- 一个模块的变化导致整个项目的重新编译
- vite 真正的按需加载: 利用浏览器ESM支持,实现真正的按需加载
原理
- 由于ES6的在浏览器的支持ESM
- 可以只实现在浏览器直接使用import 发送 http 请求
- Vite启动一个 koa 服务器拦截这些请求,并且文件通过简单的分解与整合,然后再以ESM格式
- 整个过程无需打包编译
- 将这个过程编译和运行分离,在运行时可以执行预编译 可以重新构建预编译和执行