526互联

为什么vite比webpack速度快

发布时间 2023-08-23 17:59:02作者: 粉色的海绵宝宝

一. 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方面获得巨大性能提升的同时，也带来一些负面影响，那就是首屏和懒加载性能的下降。