为什么vite比webpack速度快
一. webpack为什么慢
主要是由于其内部的核心机制——bundle模式引发的
-
webpack通过bundle机制，将项目中各种类型的源文件转化供浏览器识别的js、css、img等文件，建立源文件之间的依赖关系，将数量庞大的源文件合并为少量的几个输出文件。 -
bundle工作机制的核心部分分为两块：构建模块依赖图 -module graph和将module graph分解为最终供浏览器使用的几个输出文件。 -
构建
module graph的过程中，涉及到大量的文件IO、文件transfrom、文件parse操作；以及分解module graph的过程中，需要遍历module graph、文件transform、文件
IO等。这些操作，往往需要消耗大量的时间，导致构建速度变得缓慢,所以项目规模越大，构建速度越是缓慢 -
开发模式下，
dev server需要webpack完成整个工作链路才可以启动成功，这就导致构建过程耗时越久，dev server 启动越久 -
webpack也做了大量的优化，如loader的缓存功能、webpack5的持久化缓存,但是核心工作机制不变，远远达不到vite的速度
二.vite为什么快
主要两个方面：快速的冷启动和快速的热更新。vite借助了浏览器对ESM规范的支持，采取了与Webpack完全不同的unbundle机制
-
unbundle机制，顾名思义，不需要做bundle操作，即不需要构建、分解module graph，源文件之间的依赖关系完全通过浏览器对ESM规范的支持来解析。这就使得dev server在.
启动过程中只需做一些初始化的工作，剩下的完全由浏览器支持。 -
浏览器发起请求以后，
dev server端会通过middlewares对请求做拦截，然后对源文件做resolve、load、transform、parse操作，然后再将转换以后的内容发送给浏览器。
三.unbundle机制核心
-
模块之间的依赖关系的解析由浏览器实现
-
文件的转换由
dev server的middlewares实现并做缓存 -
不对源文件做合并捆绑操作
四.vite缺点
unbundle 机制给 Vite 在dev server方面获得巨大性能提升的同时，也带来一些负面影响，那就是首屏和懒加载性能的下降。