关于前端: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 介绍