前言
因为公司webpack和vite都用，以前的老项目用的是webpack+vue2，新项目用的是vite+vue3，所以打算深入学习一下vite，记录一下所学的知识。
为什么会选择vite
当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
相对于webpack时vite的优势
启动开发服务器快
首先先看看webpack和vite在开发启动时是如何进行代码打包的
webpack打包
由图可以看到webpack启动时解析模块是通过entry入口，然后将所有模块都进行打包，需要将所有模块都跑一遍
vite启动
由图可以看到vite启动时是根据路由来进行按需打包的，就是一开始不需要去将所有模块都跑一遍，只需要根据其路由去加载对应的模块就行。
总结
通过开发时打包对比，可以发现当项目越来越大时，webpack在开发时打包时间会越来越长，从而导致项目启动时间和热更新时间变长。而vite在开发时打包时间和热更新时间不会因为项目越来越大，JavaScript代码越来越多而导致时间变长。
简单的解释一下打包: 打包就是将浏览器不认识的代码通过一系列转化，转化成浏览器所认识的代码，这个过程就是打包
预构建以及路径补全
预构建
实际上我们经常使用网上的第三方库，但是我们如果不看库的源码，我们是不知道这些第三方库的模块规范是否是esmodule的，它们也有可能是common.js或者是UMD的，那么我们是不是需要去将这些规范统一转成统一规范，方便管理以及使用。那么谁出手？vite说没关系，此时vite会出手。
vite的预构建: 它们可以提高页面加载速度, 首先vite会找到其他模块规范对应的代码，然后通过执行esbuild打包器将其他模块规范的代码转换成esmodule模块规范的代码，这使得 Vite 的冷启动时间比任何基于JavaScript的打包器都要快得多。
esbuild: esbuild中文官网
路径补全
import { someMethod } from 'my-dep'
// 会补全为/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd，方便浏览器正确的补全他们
