论断
- 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 介绍