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

神奇了！这个 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

此外，官方还给了如何和 React 配合使用。

目前，该项目在 Github 上已收获 3400+ Star，并有 51 个 fork。近期增长很快，总在 GitHub 趋势榜。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。