神奇了！这个 Go 项目让前端构建快了近 100 倍

最近，有一个开源项目引起了 Github 上很多人的关注。据悉，开源项目的作者 Evan Wallace 是一个前端爱好者，拥有几个高 Star 数的前端开源项目。作者学了 Go 语言后，觉得可以让前端的构建工具和 Go 语言的编译一样快，于是他写了这个工具：[esbuild](https://github.com/evanw/esbuild) ，他认为当前用于 Web 的构建工具至少比它们应该慢一个数量级。他希望这个项目可以证明我们的J avaScript 工具可以更快。 开源项目地址：https://github.com/evanw/esbuild 。 ## 如何使用？ ### 安装 假定您已安装 Go 语言工具链，则可以使用 make 生成可执行文件。当前可在 npm 上的单独软件包中找到预构建的二进制文件： ```bash npm install -g esbuild-linux-64 # for Linux npm install -g esbuild-darwin-64 # for macOS npm install -g esbuild-windows-64 # for Windows npm install -g esbuild-wasm # for all other platforms ``` 这将添加一个名为 esbuild 的命令。 ### 使用 命令行界面获取入口点列表，并为每个入口点生成一个捆绑文件。以下是可用的选项： ```bash Usage: esbuild [options] [entry points] Options: --name=... The name of the module --bundle Bundle all dependencies into the output files --outfile=... The output file (for one entry point) --outdir=... The output directory (for multiple entry points) --sourcemap Emit a source map --error-limit=... Maximum error count or 0 to disable (default 10) --target=... Language target (default esnext) --minify Sets all --minify-* flags --minify-whitespace Remove whitespace --minify-identifiers Shorten identifiers --minify-syntax Use equivalent but shorter syntax --define:K=V Substitute K with V while parsing --jsx-factory=... What to use instead of React.createElement --jsx-fragment=... What to use instead of React.Fragment --trace=... Write a CPU trace to this file --cpuprofile=... Write a CPU profile to this file Example: # Produces dist/entry_point.js and dist/entry_point.js.map esbuild --bundle entry_point.js --outdir=dist --minify --sourcemap ``` ## 性能 我的主要基准测试通过将 three.js 库复制10次并从头开始构建单个捆绑包而没有任何缓存来近似一个大型代码库。对于此基准测试，esbuild 比我测试的其他 JavaScript 捆绑程序（Webpack，Rollup，Parcel和FuseBox）快10-100倍。基准测试可以使用 `make bench-three`。  | Bundler | Time | Relative slowdown | Absolute speed | Output size | | --------------- | ------- | ----------------- | -------------- | ----------- | | esbuild | 0.54s | 1x | 1013.8 kloc/s | 5.83mb | | rollup + terser | 40.48s | 75x | 13.5 kloc/s | 5.80mb | | webpack | 46.46s | 86x | 11.8 kloc/s | 5.97mb | | parcel | 124.65s | 231x | 4.4 kloc/s | 5.90mb | | fuse-box<a href="/user/next" title="@next">@next</a> | 172.56s | 320x | 3.2 kloc/s | 6.55mb | ### 为什么快 - 它是用Go语言编写的，该语言可以编译为本地代码 - 解析，打印和源映射生成全部完全并行化 - 无需昂贵的数据转换，只需很少的几步即可完成所有操作编 - 写代码时要牢记速度，并尽量避免不必要的内存分配 ## 项目目前状态 当前支持： - CommonJS modules - ES6 modules - 使用以下方式绑定 ES6 模块的静态绑定 `--bundle` - 使用 --minify 完全缩小（空格，标识符和修饰符） - 启用 `--sourcemap` 时，完全支持源地图 - .jsx 文件的 JSX 到 JavaScript 转换 - 编译时标识符替换通过 `--define` - 使用 package.json 中的 `browser` 字段进行路径替换 - 自动检测 tsconfig.json 中的 baseUrl 这是作者 2019-2020 年寒假期间写的一项业余爱好项目。我相信它是相对完整和实用的。但是，它是全新的代码，可能有很多错误。还没有任何人在生产中使用过它。合并运算符。 此外，官方还给了如何和 React 配合使用。 目前，该项目在 Github 上已收获 3400+ Star，并有 51 个 fork。近期增长很快，总在 GitHub 趋势榜。