Vite 为何如此之快？深度剖析其原理与优势

Vite 是一种现代化的前端开发构建工具，旨在优化开发体验和构建性能。

• 参考资料
  • cn.vite.dev/
• 特点
  • 快速启动
  • 即使热更新
  • Bundleless
  • 按需编译
  • 双打包器 ESBuild、Rolup
  • 无需Loader，Vite内置了对一些文件默认的处理，同时支持使用插件拓展

为什么Vite很快

Vite在优化开发启动速度方面，使用了以下手段

1. 使用ESBuild作为开发打包器，ESBuild使用Go语言开发，有效利用CPU性能进行编译
2. Vite使用了预构建机制，在启动项目时，会对第三方模块进行预构建，并将构建结果缓存下来，避免重复构建
3. 按需加载，Vite只会在浏览器请求到某个模块时，才对模块进行转换，比如Vue项目中访问一个新的页面，加载一个Vue文件时，Vite会对Vue文件进行简单编译，将其转为ES模块后返回
4. HTTP2多路复用，Vite的按需加载在某些请求下，可能会导致模块过于零碎，导致请求次数非常多，利用HTTP2的多路复用技术，同一个TCP链接可以处理多个请求，浏览器并发请求数量大大提升，可以提高请求模块的速度

为什么Vite使用ESBuild和Rollup双打包器

• ESBuild
  • 性能：使用Go语言编写，并且利用了多核CPU，并发编译代码，同时编译算法经过高度优化，效率极高。
  • 缺陷：ESBuild默认只能处理JS和TS语言，并且插件生态并不像其他打包器一样丰富，同时打包产物的稳定性存疑。
• Rollup
  • 优势：Rollup是一个轻量的打包器，相比于Webpack的臃肿，Rollup更适合中小项目的打包，同时Rollup的插件生态和稳定性虽不如Webpack，但比ESBuild更好。
  • 缺点：构建性能略低
• 因此综合速度和功能性的考虑，Vite选择了在开发环境使用ESBuild，在生产环境使用Rollup

Bundleless

"Bundleless" 是一种新兴的前端开发趋势，它的核心思想是减少或完全去除传统的打包（bundling）步骤，直接利用浏览器对现代 JavaScript 特性（尤其是 ES 模块）的原生支持。

• 传统Bundle的问题
  • 传统打包工具，将多个模块和资源打包成一个或多个文件。为了解决早期浏览器无法直接处理模块化代码的问题。但是项目代码数量增加后，对于开发来说，每次启动都需要完整编译代码，时间很长，影响开发效率
• Bundleless原理
  • 利用现代浏览器支持加载ESM的特性，Bundleless打包器使用按需编译的方式，只将需要的模块进行简单编译转换，并响应给浏览器。
  • 同时还利用了HTTP/2多路复用的特性，在加载细碎模块时，有更好的速度

构建过程

开发构建

1. 启动基于Node.js http模块的服务器
2. 加载配置文件，初始化插件
3. 处理浏览器请求，预构建代码，或使用缓存
4. 编译浏览器请求的模块，将其转换为浏览器可以识别的代码，并返回
5. 监听文件变化，触发HMR，并通知浏览器更新

生产构建流程

1. 加载配置文件，初始化插件
2. 分析依赖，构建依赖图
3. 调用插件处理中间代码Chunks
4. 进行Tree Shaking和代码分割
5. 输出文件