# Vite
# Vite原理
当声明一个script时,如:<script type="module" src="/src/main.js"></script>
,浏览器就向服务器发起一个GET请求。
浏览器请求到了main.js文件,检测到内部含有import引入的包,又会对其内部的import引用发起http请求获取模块的内容文件。
Vite的主要功能就是通过劫持浏览器的这些请求,并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合,然后再返回 给浏览器,Vite整个过程中没有对文件进行打包编译,所以其运行速度比原始的webpack开发编译速度快出许多!
# vite的的优点
- Vite通过在一开始将应用中的模块区分为依赖和源码两类,改进了开发服务器启动时间。
- Vite使用Esbuild预构建依赖。Esbuild使用Go编写,并且比以Javascript编写的打包器预构建依赖快10-100倍。
- 源码通常包含一些并非直接是JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。 同时,并不是所有的源码都需要同时被加载。(例如基于路由拆分的代码模块)。
- Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。 根据情景动态导入的代码,即只在当前屏幕上实际使用时才会被处理。