0.背景
随着浏览器对es-module的支持，bo-bundle的构建工具开始涌现，其中比较火的就是vite和snow-pack。这些构建工具都是基于bundle-less的思想。
1.no-bundle的劣势&解决方案
-
文件编译的耗时仍然存在
-
海量请求的加载性能问题
-
vite独有：开发/生产环境表现不一致问题
1. vite快在哪里？
1.1 冷启动
vite的快主要在两个地方，冷启动和热更新。冷启动的快对比的对象是webpack在执行dev serve本地启动的耗时多。
为什么webpack执行dev serve很慢。因为webpack使用的打包机制是bundle机制。
(1) webpack的构建流程
(2) vite的构建流程
从上图可知，为什么webpack启动慢，因为在webpack启动本地服务器之前，需要先执行文件的模块化 + 打包（依赖查找，文件loader转化）两个任务。而在vite启动中，先将服务器跑起来，然后再去请求对应的文件。不用在启动之前再去执行模块化和打包的操作。节省这部分流程就节省了很多时间。
总结：不用打包整个项目
vite的主要执行流程
1.浏览器解析到script标签，且type值为module类型
<script type="module" src="main.js"></script>
2.解析到script标签后，发起http请求加在src对应的文件main.js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
3.这个文件中如果你遇到import关键字，会继续发起http请求进行加载
1.2 热更新
2.vite快的原理
浏览器支持ES Module，这就意味着在浏览器中可以直接在中运行“import”关键字，实现模块的动态引入。 在vite开发环境构建的时候，会讲js模块分为两种类型：依赖模块（第三方模块）和源码模块 对于第三方模块使用esbuild进行捆绑打包，esbuild这个库的打包速度比webpack快。 源码模块就是值正常的业务代码（.less、.vue等）
3.vite的其他优化策略
浏览器缓存 依赖预构建 开发模式下使用esbuild
