vite 的构建流程

发布时间:2023年12月22日

Vite 是一个基于现代浏览器原生 ES 模块的开发服务器和构建工具,其构建流程相较于传统的打包工具有所不同。下面是 Vite 的构建流程简要说明:

1、启动开发服务器:通过运行 vite 命令,Vite 启动一个开发服务器。
2、解析入口模块:当用户访问应用程序时,Vite 会解析入口模块(通常是 index.html)。它会分析该模块的依赖关系,并将其作为构建的起点。
3、按需编译:Vite 会根据需要实时编译每个模块。当浏览器请求某个模块时,Vite 会检查该模块是否已经被编译,如果没有,它将根据模块的类型(如 .js、.vue)采取不同的编译策略。对于 JavaScript 文件,Vite 使用 esbuild 进行快速的原生 ES 模块转换,生成浏览器可直接执行的代码。对于 Vue 单文件组件(.vue 文件),Vite 使用 @vue/compiler-sfc 解析并编译它们成为 JavaScript 代码。
4、提供虚拟模块:完成编译后,Vite 会将模块包裹在一个虚拟模块中,并将该模块作为一个请求的响应返回给浏览器。这样浏览器可以直接加载这些虚拟模块,无需打包成独立文件。处理静态资源:Vite 会对静态资源(如 CSS、图片等)进行特殊处理,并返回给浏览器以供使用。
5、热模块替换(HMR):Vite 内置了热模块替换功能,使得在开发过程中修改代码后,可以实时更新浏览器中的页面,而无需刷新整个页面。

总结起来,Vite 的构建流程主要是基于原生 ES 模块的按需编译,每个模块都被实时编译并返回给浏览器。它采用了虚拟模块的概念,使得浏览器可以直接加载这些模块,提升了开发的速度和效率。此外,Vite 还支持热模块替换,可以在开发过程中实时更新代码。

文章来源:https://blog.csdn.net/weixin_43962020/article/details/135155012
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。