ESBuild 调研

结论

• ESBuild 可以在生产环境中使用，且能有效提高项目构建速度。
• 基于 Webpack 的项目可以使用 esbuild-loader 来替换 ts-loader、babel-loader 来提高文件编译速度，但不能用来当做plugins使用。
• ESBuild 的构建API基于物理文件进行处理的， Webpack 构建过程是操作内存中文件来处理的。

• 2 种场景下不可使用 ESBuild：兼容低版本浏览器需要ES5代码时；项目中有使用babel-plugin相关插件时。

  • ESBuild 仅将代码编译为 ES6。
  • ESBuild 不支持AST的操作能力，所以无法兼容 babel-plugin 相关插件处理AST的能力。

ESBuild 是什么

ESBuild是一个急速 JS 打包工具，比现有打包工具快10~100倍。

特点

• 无需缓存即可实现基础打包
• 支持 ES6 跟 CommonJS 模块
• 支持ES 6 Tree Shaking
• 体积小
• 插件化

• 其他

  • 内置支持编译 jsx

不足：

对JS语法支持度不足

对不支持的语法会‘原样输出’到构建产物

• Top-level await
• async await
• BigInt
• Hashbang 语法

不支持 AST 过程的能力扩展

会导致依赖AST处理的babel-plugin无法正常工作

例如: babel-plugin-import，或者自定义的babel-plugin

不兼容低版本浏览器

esbuild 仅将代码编译成 es6

不支持TS类型检查

作者明确表示未来也不会支持TS 类型检查能力

需要额外引入其他类型检查插件

原理

• 基于 ES Module
• Go 语言开发，比 V8 的 JIT 更有性能优势
• 解析、构建产物、生成sourcemap 并行化处理
• 支持多线程
• 高效的内存使用

对比

• vite https://github.com/vitejs/vite

  • 底层是 ES Module 并依赖 ESBuild 的 transform API能力
• swc https://github.com/swc-project/swc

API能力

• transform

  • 编译文件成 js

• build、buildSync

  • 使用 transform
  • 转换代码并压缩

• service

  • 复用子进程，避免性能浪费
  • 封装了 trasnform、build

如何应用

• 基于webpack 的项目使用 esbuild-loader 来替换 ts-loader 或者 babel-loader
• 类型检查可以使用 fork-ts-checker-webpack-plugin 完成

参考资料

• Vite 官网
• ESbuild 介绍