结论
-
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 是什么
特点
-
无需缓存即可实现基础打包
-
支持 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 并行化处理
- 支持多线程
- 高效的内存使用
对比
-
- 底层是 ES Module 并依赖 ESBuild 的 transform API能力
API能力
-
transform
- 编译文件成 js
-
build、buildSync
- 使用 transform
- 转换代码并压缩
-
service
- 复用子进程,避免性能浪费
- 封装了 trasnform、build
如何应用
- 基于webpack 的项目使用 esbuild-loader 来替换 ts-loader 或者 babel-loader
- 类型检查可以使用 fork-ts-checker-webpack-plugin 完成
参考资料