为什么vite比webpack速度快

一. webpack为什么慢

主要是由于其内部的核心机制——bundle模式引发的

1. webpack通过 bundle机制，将项目中各种类型的源文件转化供浏览器识别的js、css、img等文件，建立源文件之间的依赖关系，将数量庞大的源文件合并为少量的几个输出文件。

2. bundle工作机制的核心部分分为两块：构建模块依赖图 - module graph 和将 module graph 分解为最终供浏览器使用的几个输出文件。

3. 构建 module graph 的过程中，涉及到大量的文件 IO、文件 transfrom、文件 parse 操作；以及分解 module graph 的过程中，需要遍历 module graph、文件 transform、文件
   IO 等。这些操作，往往需要消耗大量的时间，导致构建速度变得缓慢,所以项目规模越大，构建速度越是缓慢

4. 开发模式下，dev server 需要 webpack 完成整个工作链路才可以启动成功，这就导致构建过程耗时越久，dev server 启动越久

5. webpack 也做了大量的优化，如 loader 的缓存功能、webpack5 的持久化缓存,但是核心工作机制不变，远远达不到vite的速度

二.vite为什么快

主要两个方面：快速的冷启动和快速的热更新。vite借助了浏览器对ESM规范的支持，采取了与Webpack完全不同的unbundle机制

1. unbundle 机制，顾名思义，不需要做 bundle操作，即不需要构建、分解 module graph，源文件之间的依赖关系完全通过浏览器对 ESM 规范的支持来解析。这就使得dev server在.
   启动过程中只需做一些初始化的工作，剩下的完全由浏览器支持。

2. 浏览器发起请求以后， dev server 端会通过 middlewares 对请求做拦截，然后对源文件做 resolve、load、transform、parse 操作，然后再将转换以后的内容发送给浏览器。

三.unbundle机制核心

1. 模块之间的依赖关系的解析由浏览器实现

2. 文件的转换由 dev server的 middlewares 实现并做缓存

3. 不对源文件做合并捆绑操作

四.vite缺点

unbundle 机制给 Vite 在dev server方面获得巨大性能提升的同时，也带来一些负面影响，那就是首屏和懒加载性能的下降。

首屏

由于unbundle机制，首屏期间需要额外做以下工作:

1. 不对源文件做合并捆绑操作，导致大量的 http 请求；
2. dev server 运行期间对源文件做 resolve、load、transform、parse 操作；
3. 预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止；

和Webpack对比，Vite 把需要在dev server启动过程中完成的工作，转移到了 dev server 响应浏览器请求的过程中，不可避免的导致首屏性能下降。

不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再reload页面时，首屏性能会好很多。原因是dev server会将之前已经完成转换的内容缓存起来。

懒加载

和首屏一样，由于unbundle机制，动态加载的文件，需要做 resolve、load、transform、parse 操作，并且还有大量的http请求，导致懒加载性能也受到影响。