vite 开发环境是用esbuild来构建的,是冷启动
冷启动的意思是其是先启动服务,然后服务访问url,才进行文件的依赖收集
我们首先启动vite服务,然后打开浏览器访问项目
首先处理main.js的内容
读取文件内容
vite定义了三个依赖收集
- urlToModuleMap
- idToModuleMap
- fileToModulesMap
vite:import-analysis插件绑定依赖
分析出main.js有3个导入,0个导出
之后就分析vue
vue的路径被解析为预打包的缓存
vue的依赖收集和main.js一样,也创建了那三个map,把它加入到全局的map缓存中
热更新hmr也收集到了vue
然后处理css
和vue一样
创建css的mod,并且收集进全局的缓存中
最后是App.vue
App.vue 的mod创建好后,回到main.js
需要绑定main.js和vue、css、App这三个mod的关系
vue、css、App的mod.importers.add(main.js.mod)
main.js.mode.importedModules.add(vue、css、App的mod)
这样关系就绑定好了,然后返回对应的文件请求
后面浏览器解析main.js的时候会发起vue、css、App的请求,又会解析对应文件的依赖
这样完整的依赖图就收集好了
还有一点需要注意的地方
对于请求预打包的产物,会命中强缓存
请求其他的,会命中协商缓存