👇 下面是我根据自己对 vite 工作方式的理解的极简总结,欢迎指正
vite 在开发环境下不需要打包,所以它很快;当我们启动我们的项目的时候,vite 会直接启动一个开发服务器,加载文件入口文件。 它利用了浏览器对原生的 es module 的支持,拦截浏览器的 http 请求,对返回的结果进行编译,然后返回给浏览器渲染
浏览器对于
type='module'的 script 标签,允许它加载的文件或者是内部的代码使用 es 的模块化语法,并且对于 import 引入的文件会发送 http 请求去拿文件。
-
利用浏览器 type='module'的 script 标签加载入口 js 文件,然后对入口文件中的 import 加载的资源发送 http 请求
-
第三方模块预打包,放在/node_modules/.vite 文件夹下。解析到对第三方模块的依赖时,直接替换 import 的地址
-
devServer:拦截 http 请求,对于浏览器无法使用的内容进行编译