项目解析jsx文件_神奇了！这个 Go 语言项目让前端构建快了近 100 倍

最近，有一个开源项目引起了 Github 上很多人的关注。据悉，开源项目的作者 Evan Wallace 是一个前端爱好者，拥有几个高 Star 数的前端开源项目。作者学了 Go 语言后，觉得可以让前端的构建工具和 Go 语言的编译一样快，于是他写了这个工具：esbuild ，他认为当前用于 Web 的构建工具至少比它们应该慢一个数量级。他希望这个项目可以证明我们的J avaScript 工具可以更快。

开源项目地址：https://github.com/evanw/esbuild。

如何使用？

安装

假定您已安装 Go 语言工具链，则可以使用 make 生成可执行文件。当前可在 npm 上的单独软件包中找到预构建的二进制文件：

npm install -g esbuild-linux-64   # for Linuxnpm install -g esbuild-darwin-64  # for macOSnpm install -g esbuild-windows-64 # for Windowsnpm install -g esbuild-wasm       # for all other platforms

这将添加一个名为 esbuild 的命令。

使用

命令行界面获取入口点列表，并为每个入口点生成一个捆绑文件。以下是可用的选项：

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@next	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 趋势榜。

推荐阅读

震惊！这本 JS 开源图书高达 118000+ 星星：你不知道的 JS

OpenSourceDaily - 送给爱开源的你

Git · GitHub · GitLab · Gitee