【8.3】esbuild(1) - esbuild 基本介绍和原理 | 8月更文挑战

962 阅读2分钟

什么是 esbuild

esbuild 是一个开源的前端打包工具,是一个打包速度比较快的 JavaScript 打包和压缩工具~ esbuild.github.io/

esbuild 官方的构建速度对比

image.png 这个测试是基于大的 JavaScript 代码库,这个代码库复制了 three.js 十次,并且从头开始构建单个包,具体的代码库可以在 github.com/evanw/esbui… 执行 make bench-three 看到。

从官方的例子来看,esbuild 的构建速度(0.37s)远快于其他的打包库,前两个分别为 esbuild 和 esbuild 单线程情况下的打包速度。

更多的详细信息可以查看官网的分析:esbuild.github.io/faq/#benchm…

esbuild 的主要功能

  • 打包时极致的速度,不需要缓存
  • 支持 ES6 和 CommonJS 模块
  • 支持 ES6 模块的 tree shaking
  • 给 JavaScript 和 Go 的 API
  • 支持 TypeScript 和 JSX 的语法
  • 支持 Source Maps
  • 支持压缩
  • 支持插件

为什么 esbuild 打包这么快(Why esbuild build so fast)

主要有下面几个原因,本次文章先解释一个原因,后面的部分在下一篇文章介绍:

    1. esbuild 是用 Go 语言写的,并且编译为 native code
    1. 大量使用并行
    1. esbuild 中的所有内容都是从头编写的
    1. 内存得到有效利用

esbuild 是用 Go 语言写的,并且编译为 native code

大多数其他打包工具都是用 JavaScript 编写的,但是对于 JIT-compiled(just-in-time compiled,也叫做 run-time compilations、运行时编译,或者也叫做 dynamic translation 动态编译)语言来说,命令行应用程序的性能时最差的。

每次运行打包器时,Javascript VM 都是第一次看到打包器的代码,没有任何优化提示

当 esbuild 忙于解析你的 JavaScript 时,node 正忙于解析你的打包器的 JavaScript 代码。当 node 完成你的打包器代码的解析时,esbuild 可能已经退出并且你的打包器甚至还没有开始打包。

也就是说其他打包器因为使用 JavaScript 编写,于是每次编译开始需要先解析打包器的代码,然后再去实际编译 JavaScript 代码,这样就会更慢。而 Go 不属于动态编译的语言,省去了这个步骤。

详细参考:why esbuild build so fast esbuild.github.io/faq/#why-is…