由于这几个月使用了Vue3 + TS + Vite进行开发，并且是真的被Vite强力吸粉了！！！Vite最大的优点就是：快！！！非常快！！！
说实话，使用Vite开发之后，我都有点不想回到以前Webpack的项目开发了，因为之前的项目启动项目需要30s以上，修改代码更新也需要2s以上，但是现在使用Vite，差不多启动项目只需要1s，而修改代码更新也是超级快！！！
那到底是为什么Vite可以做到这么快呢？官方给的解释，真的很官方。。所以今天我想用比较通俗易懂的话来讲讲，希望大家能看一遍就懂。
咱们都知道，以前的浏览器是不支持ES module的，比如：
// index.jsimport { add } from './add.js'import { sub } from './sub.js'console.log(add(1, 2))console.log(sub(1, 2))// add.jsexport const add = (a, b) => a + b // sub.jsexport const sub = (a, b) => a - b 你觉得这样的一段代码，放到浏览器能直接运行吗？答案是不行的哦。那怎么解决呢？这时候打包工具出场了，他将index.js、add.js、sub.js这三个文件打包在一个bundle.js文件里，然后在项目index.html中直接引入bundle.js，从而达到代码效果。一些打包工具，都是这么做的，例如webpack、Rollup、Parcel
这个不用说，大家都懂：
Vite在打包的时候，将模块分成两个区域依赖和源码：
咱们看下面两张图：
第一张图，是以前的打包模式，就像之前举的index.js、add.js、sub.js的例子，项目启动时，需要先将所有文件打包成一个文件bundle.js，然后在html引入，这个多文件 -> bundle.js的过程是非常耗时间的。
第二张图，是Vite的打包方式，刚刚说了，Vite是直接把转换后的es module的JavaScript代码，扔给支持es module的浏览器，让浏览器自己去加载依赖，也就是把压力丢给了浏览器，从而达到了项目启动速度快的效果。
刚刚说了，项目启动时，将模块分成依赖和源码，当你更新代码时，依赖就不需要重新加载，只需要精准地找到是哪个源码的文件更新了，更新相对应的文件就行了。这样做使得更新速度非常快。
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。
刚刚咱们说的都是开发环境，也说了，Vite在是直接把转化后的es module的JavaScript，扔给浏览器，让浏览器根据依赖关系，自己去加载依赖。
那有人就会说了，那放到生产环境时，是不是可以不打包，直接在开个Vite服务就行，反正浏览器会自己去根据依赖关系去自己加载依赖。答案是不行的，为啥呢：
所以Vite最后的打包是使用了Rollup。
本文链接：http://www.28at.com/showinfo-26-79148-0.htmlVite 为什么快呢？快在哪？说一下我自己的理解吧
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： .NET6中的await原理浅析
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号