vite 中选用 Esbuild 打包开发环境代码，那么 Esbuild 快在哪?

Question

vite 中选用 Esbuild 打包开发环境代码，那么 Esbuild 快在哪?

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

主要由以下几个优势：

• 语言优势

  • 大多数前端打包工具都是基于 JavaScript 实现的，JavaScript 程序每次执行，都需要解释器一边将源码翻译成机器语言，一边调度执行
  • Esbuild 则使用 Go 语言编写，在资源打包这种 CPU 密集场景下，Go 更具性能优势，编译运行层面，Go 前置【源码编译】过程，即运行的就是 Go 语言编译后的【机器码】

• 多线程优势

  • JavaScript 本质上是一门【单线程】语言，直到引入 WebWorker 规范之后才有可能在浏览器、Node 中实现【多线程】操作
  • Go 本身就具有【多线程】运行能力，其内部实现的算法能够更饱和地使用各个 CPU 核，特别是打包过程的【解析】和【代码生成】阶段是完全【并行处理】，提供了更高的运行性能

• 最小功能集合

  • Esbuild 并不是另一个 Webpack，它仅仅提供了构建一个现代 Web 应用所需的最小功能集合，未来也不会大规模加入各类构建的特性
  • Esbuild 只解决一部分问题，所以其架构复杂度相对较小，相对地编码复杂度也会小很多，相对于 Webpack、Rollup 等的工具，更容易把性能做到极致

• 结构一致性

  • Webpack 中使用 babel-loader 处理 JavaScript 代码时，可能需要经过多次数据转换，源码需要经历【 string —> AST —> AST —> string —> AST —> string 】在【字符串】与 【AST】之间反复横跳
  • Esbuild 重写大多数转译工具之后，能够在多个编译阶段共用相似的 AST 结构，尽可能减少字符串到 AST 的结构转换，提升内存使用效率

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。