vite 开发环境依赖收集

105 阅读1分钟

vite 开发环境是用esbuild来构建的,是冷启动

冷启动的意思是其是先启动服务,然后服务访问url,才进行文件的依赖收集

我们首先启动vite服务,然后打开浏览器访问项目

image.png

首先处理main.js的内容 1678786573752.png

读取文件内容 image.png

vite定义了三个依赖收集

  • urlToModuleMap

image.png

  • idToModuleMap

image.png

  • fileToModulesMap

image.png

vite:import-analysis插件绑定依赖

image.png

分析出main.js有3个导入,0个导出

之后就分析vue

vue的路径被解析为预打包的缓存

image.png

vue的依赖收集和main.js一样,也创建了那三个map,把它加入到全局的map缓存中

image.png

热更新hmr也收集到了vue image.png

然后处理css

和vue一样

创建css的mod,并且收集进全局的缓存中

image.png

最后是App.vue

App.vue 的mod创建好后,回到main.js

image.png

image.png

需要绑定main.js和vue、css、App这三个mod的关系

vue、css、App的mod.importers.add(main.js.mod)

main.js.mode.importedModules.add(vue、css、App的mod)

这样关系就绑定好了,然后返回对应的文件请求

image.png

后面浏览器解析main.js的时候会发起vue、css、App的请求,又会解析对应文件的依赖

这样完整的依赖图就收集好了

还有一点需要注意的地方

image.png

对于请求预打包的产物,会命中强缓存

image.png

请求其他的,会命中协商缓存