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

如何使用？

安装

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

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 的命令。

使用

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

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