初探Vite原理解析前言 随着Vue3.0的日渐成熟，公司中新的项目也逐渐用了起来。小凌最近发现Vue3.0提供了一个更

前言

随着Vue3.0的日渐成熟，公司中新的项目也逐渐用了起来。小凌最近发现Vue3.0提供了一个更快的打包工具Vite。好奇心的驱使下，使我开始研究它的原理是啥？特此写了这篇博客用来记录自己研究的点滴。

原理剖析

首先是Vite原理的剖析，我们来看一下Vite一开始的工作方式。Vite的项目我已经启动起来了，我们来看下它初次载入的一些网络请求：

为什么会有这些请求呢?我们来看下index.html这个宿主页

这边会有一个type="module" 的方式去加载 /src/main.js。这边设置成type="module" 有什么好处呢？因为将来在这个 main.js里头都会可以Es模块的方式来进行组织和编写且不需要打包。

main.js

我们来看main.js,再首次载入时，先加载main.js。接着请求 vue 和 App.vue。再这些都加载完成之后再调用 createApp(App).mount('#app')创建应用程序再页面中显示。

这样做有什么好处呢？

1. 再开发阶段不需要打包。不管我项目有多大，我的速度都是最快的。
2. 这是按需加载的，用到这个页面才加载这个页面相关的文件，不相关的绝不加载。提高了开发速度。

是如何加载Vue的？

接下来我们遇到一个问题，浏览器加载只支持相对地址。也就是说它根据当前index.html的相对地址可以加载 App.vue或者我们自己写的./xxx.js。可是让它加载一个Vue这样的裸模块，要怎么做呢？它也不能去安装一个npm。

对于Vite而言，它会首先进行一次预打包。

我们可以从浏览器源代码发现，Vue他是从/node_modules/.vite/文件夹引用的。它提前会把第三方模块进行prebuild(预打包)。先放到/.vite/文件夹下，再替换为相对地址。这样浏览器就可以识别不报错了。

如何加载.vue文件的？

我们都知道浏览器只能解析.html、 .css、.js文件。.vue文件是怎么解析的呢？

Vite其实在这里还要额外做一件事，就是把那些特殊import的资源解析和转换。 .vue文件会变成.js文件。

如此就可以加载.vue文件了。

传送门

更多配置与详情可参考官方网站