Vite工作流程

开始

1. Vite通过服务端将首页（index.html）返回，首页中加载main.js

HTTP缓存： 充分利用 http缓存做优化，依赖（不会变动的代码）部分用max-age=0,immutable 强缓存 ，源码部分用304 协商缓存 ，提升页面打开速度

max-age=0 表示使用强缓存，但是使用前会给服务器发请求确认文件是否改变。

1. main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

有几处需要作出说明：

1. es6Module不支持直接导入第三方模块，路径必须是 ./ 或者 / 才会发起请求。
2. 对比源码中的main.js可以看到，将vue的引入做了处理， import { createApp } from ‘vue’ 变成了 ** ‘/@modules/vue.js’** ，表示是第三方依赖，会去node_modules下面找。
3. 当扫描到import语句时，会向服务器发送请求，返回需要的文件，这也是为什么vite启动速度比webpack快很多的原因， 因为webpack在一开始就会对所有文件进行打包编译，而vite则不会打包，使用源文件，通过请求的方式按需动态加载 。
4. 对.vue服务器会内部进行处理，分成多import（也就是多个请求），将template，css转成对象最终导出。

1. HMR同webpack类似，也是用的websocket当文件1内容修改进行局部更新。

总结

• 在 koa 中间件里获取请求 body
• 通过 es-module-lexer 解析资源 ast 拿到 import 的内容
• 判断 import 的资源是否是 npm 模块
• 返回处理后的资源路径："vue" => "/@modules/vue"

将处理的template,script,style等所需的依赖以 http请求的形式，通过query参数形式区分并加载 SFC文件各个模块内容。