乐趣区

关于前端: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 介绍
退出移动版