序大家好，我是林三新。用最通俗易懂的语言解释最难的知识点是我的座右铭。基础是进阶的前提是我的初衷。由于前几个月使用Vue3+TS+Vite进行开发，所以真的被Vite吸引住了！！！Vite最大的优势就是：快！！！非常快！！！说实话，用Vite开发后，不想再回到之前的Webpack项目开发，因为之前的项目启动项目需要30多秒，修改代码更新需要2秒多，但是现在用Vite，启动项目只需要1秒左右，修改代码更新也超级快！！！那么Vite到底为什么能做到这么快呢？官方的解释真的很官方。.所以今天我想用一个比较通俗易懂的语言来说一下，希望大家看一遍就明白。问题现状我们都知道ES模块化支持的问题。之前的浏览器不支持ES模块，比如：//index.jsimport{add}from'./add.js'import{sub}from'./sub.js'console.log(add(1,2))console.log(sub(1,2))//add.jsexportconstadd=(a,b)=>a+b//sub.jsexportconstsub=(a,b)=>a-b你觉得这样一段代码能直接在浏览器中运行吗？答案是不。如何解决？这时候，打包工具就派上用场了。他将index.js、add.js、sub.js这三个文件打包成一个bundle.js文件，然后直接在项目index.html中引入bundle.js，达到代码效果。一些打包工具可以做到这一点，例如webpack、Rollup和Parcel。项目启动和代码更新的问题不用多说了：项目启动：随着项目越来越大，启动一个项目可能需要几分钟代码更新：随着项目越来越大，如果修改一个一小段代码，保存后需要几秒钟才能更新。解决问题，解决项目启动慢的问题。Vite在打包时将模块分为两个区域。Dependencyandsourcecode:Dependency:一般是开发过程中不会改变的那种JavaScript，比如组件库，或者一些大的依赖（可能有上百个模块的库），这部分使用esbuild来预构建依赖，esbuild是用围棋写的。比用JavaScript编写的打包程序的预构建依赖项快10-100倍。源码：一般是修改概率大的文件，比如JSX、CSS、vue，需要转换，经常修改编辑。同时，这些文件并不是一次性全部加载，而是可以按需加载（比如路由的懒加载）。Vite会把文件转换成es模块直接发送给浏览器，因为现在大部分浏览器直接支持es模块，性能提升很多，为什么呢？我们看下面两张图：第一张图是之前的打包方式，就像之前的index.js、add.js、sub.js的例子一样，在项目启动的时候，需要将所有的文件打包成一个文件bundle.js，然后在html中导入，这个多文件->bundle.js的过程非常耗时。第二张图是Vite的打包方式。刚才说了，Vite直接把es模块转换后的JavaScript代码丢给支持es模块的浏览器，让浏览器自己加载依赖，也就是丢掉压力。交给浏览器，从而达到项目快速启动的效果。解决更新慢的问题，刚才说了，在项目启动的时候，模块分为依赖和源代码。更新代码时，不需要重新加载依赖项。你只需要准确找出更新了哪个源码文件，更新对应的文件即可。向上。这样做可以使更新非常快。Vite还使用了HTTPheaders来加速整个页面的重新加载（再次让浏览器为我们做更多）：对源代码模块的请求将根据304NotModified协商缓存，而对依赖模块的请求将通过Cache-Control:max-age=31536000,immutable是强缓存的，一旦缓存了就不需要再请求了。刚才说的生产环境就是开发环境，我们也说过Vite直接把es模块转换后的JavaScript丢给浏览器，让浏览器根据依赖关系自己加载依赖。那么有人会说，放到生产环境的时候，能不能不打包，直接开个Vite服务就行，反正浏览器会根据依赖自己加载依赖。答案是否定的，为什么：1.你的代码是放在服务器上的，浏览器加载依赖太多肯定会造成更多的网络请求2.为了在生产环境中获得最好的加载性能，最好的代码应该摇树、延迟加载、分块和CSS处理。目前esbuild对于这些优化操作还不是很完善，所以Vite最终的打包使用了Rollup。结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友一起钓鱼哈哈，鱼群
