引言

前段时间我实习的时候把项目的构建工具升级到Vite，感觉体验确实比基于Webpack5的Vue-Cli3丝滑了不少，那么我们来一起探索一下Vite相对于Vue-Cli3好在哪吧。

Vite 相对于Webpack的好处

Webpack本质上是一个JavaScript应用的静态编译工具，开发的时候可以启动本地服务器实时预览，但这个过程还是需要对整个项目进行打包，所以非常缓慢。

对于开发中文件热更新也会有相同的问题，所有涉及到文件和依赖的更新都需要重新编译，这样会导致开发效率下降。

Vite 只启动静态页面的服务，对文件代码不会进行打包，服务器会根据客户端的请求来处理不同的模块，实现了真正的按需加载。

对于热更新问题，Vite升级了热更新机制，对当前的文件进行编译，然后把编译后的文件写入到缓存中，客户端直接读取缓存中的文件，不需要再次编译。

综上，vite 具有了快速冷启动、按需编译、模块热更新等优良特质。

Vite工作原理

在根目录下的index.html中，有这么一段：

通过**type='module'**改变了js的引入方式，使js能够通过import引入其他的js模块。通过这种方式能够使得开发过程中不需要打包即可引入js模块，且能够按需加载。

在引入需要npm打包的模块时，Vite会进行一个预打包的操作：

预打包的意义是将第三方模块打包后放在vite的一个裸模块地址，以方便引入。

在加载vue文件的时候，vite会将vue文件解析成一个js文件，以此来加载vue的内容：

根据这些方法，我们可以看到vite的工作原理是这样的：
通过启动一个服务器，加载首页，并在首页中设置**type='module'**改变了js的引入方式，并通过模块地址替换的方法引入了第三方模块，这样就实现了按需加载。对于Vue文件，vite会利用SFC的方法解析js并渲染Dom文件，以此来加载vue的内容。
有了这些原理，我们就可以动手实现一个简单的Vite了。具体不在文章中赘述了，感兴趣的可以看我实现的项目方法。
我自己实现的Vite项目