Vite: 双构建引擎 - Esbuild和Rollup

概述

• 在前端构建工具领域，Vite以其卓越的性能和创新的构建方式迅速崛起
• 其中一个核心优势在于其背后强大的双构建引擎 —— Esbuild 和 Rollup
• 这两个引擎分别负责不同的构建阶段，共同为Vite提供了出色的构建速度和灵活的构建策略

Vite 架构图

• 很多人对 Vite 的双引擎架构仅仅停留在开发阶段使用 Esbuild，生产环境用 Rollup 的阶段，殊不知，Vite 真正的架构远没有这么简单
• 参考如下 Vite 架构图：

1 ) Esbuild 高性能构建工具

• Esbuild 在很多关键的构建阶段让 Vite 获得了相当优异的性能，如果这些阶段用传统的打包器/编译器来完成的话，开发体验要下降一大截

2 ）Esbuild 作用

• 依赖预构建——作为 Bundle 工具

• 在开发阶段的依赖预构建阶段， node_modules 依赖的大小动辄几百 MB 甚至上 GB ，会远超项目源代码，相信大家都深有体会，如果这些依赖直接在 Vite 中使用，会出现一系列的问题，这些问题

• 在依赖预构建这块，主要是 ESM 格式的兼容性问题和海量请求的问题，不再赘述，总而言之，对于第三方依赖，需要在应用启动前进行打包并且转换为ESM 格式

• Vite 1.x 版本中使用 Rollup 来做这件事情，但 Esbuild 的性能实在是太强了，Vite 2.x 果断采用 Esbuild 来完成第三方依赖的预构建，至于性能到底有多强，大家可以参照它与传统打包工具的性能对比

• 当然，Esbuild 作为打包工具也有一些缺点，不支持降级到 ES5 的代码。这意味着在低端浏览器代码会跑不起来，不支持 const enum 等语法，这意味着单独使用这些语法在 esbuild 中会直接抛错，不提供操作打包产物的接口，像 Rollup 中灵活处理打包产物的能力(如 renderChunk钩子) 在 Esbuild 当中完全没有。不支持自定义 Code Splitting 策略。传统的 Webpack 和 Rollup 都提供了自定义拆包策略的 API，而 Esbuild 并未提供，从而降级了拆包优化的灵活性
• 尽管 Esbuild 作为一个社区新兴的明星项目，有如此多的局限性，但依