Categories
程式開發

esbuild:一款快10-100倍的JS打包/壓縮工具


為什麼又造個輪子?

為什麼又要構建一個 JavaScript 構建工具呢?因為當前用於 Web 的構建工具比用戶期望的性能至少慢一個數量級。我希望這個項目可以作為一種“存在證明”,證明我們的 JavaScript 工具實際上能比現在快得多。

基準測試

我想到的用例是打包用於生產的大型代碼庫。這個流程包括壓縮代碼以減少網絡傳輸時間,以及生成源映射(對於調試生產中的錯誤是非常重要的)。理想情況下,構建工具還應該具備快速構建能力,而不必先預熱緩存。

我的主基準測試會將 three.js 庫複製 10 次並從頭開始構建單個包,過程中沒有任何緩存,從而模擬一個大型代碼庫。在這個基準測試中,esbuild 比我測試的其他 JavaScript 打包器(Webpack、Rollup、Parcel 和 FuseBox)快 10-100 倍。這個基準測試可以使用’make bench-three’來運行。

esbuild:一款快10-100倍的JS打包/壓縮工具 1esbuild:一款快10-100倍的JS打包/壓縮工具 2

時間數據取三次運行中最好的一次,主要運行環境如下:

  • 使用’–bundle –minify –sourcemap’來運行 esbuild。
  • 使用’rollup-plugin-terser’插件,因為 rollup 自身不支持壓縮。
  • Webpack 使用的是’–mode = production –devtool = sourcemap’。
  • Parcel 使用默認選項。
  • FuseBox 使用’useSingleBundle: true’配置。
  • 絕對速度基於總行數(包括註釋和空白行),當前為 547,441。
  • 測試是在配備 16GB RAM 的 6 核 2019 MacBook Pro 上完成的。

為什麼這麼快?

幾個原因:

  • 它是用 Go 語言編寫的,該語言可以編譯為原生代碼;
  • 解析,打印和源映射生成全部完全並行化;
  • 無需昂貴的數據轉換,只需很少的幾步即可完成所有操作;
  • 編寫代碼時處處注意速度表現,並儘量避免不必要的配置。

狀態

目前支持:

  • CommonJS 模塊
  • ES6 模塊
  • 使用’–bundle’與 ES6 模塊的靜態綁定打包
  • 使用’–minify’完全壓縮(空格、標識符和修飾符)
  • 啟用’–sourcemap’時,完全支持源映射
  • .jsx 文件的 JSX 到 JavaScript 轉換
  • 通過’–define’進行編譯時標識符替換
  • 使用 package.json 中的’browser’字段進行路徑替換
  • 自動檢測 tsconfig.json 中的’baseUrl’

這是我在 2019-2020 年寒假期間寫的一項業餘愛好項目。我相信它是相對完整和實用的。但它是全新的代碼,可能有很多錯誤。還沒有任何人在生產中使用過它。使用風險自負。

還請記住,它並不完全支持將現代語言語法降低到早期語言版本。目前只有類字段和 nullish 合併運算符是支持的。

我個人不想運營一個大型的開源項目,因此我目前沒在尋求貢獻。

安裝

如果你已安裝 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=...            模块名称
  --bundle               将所以依赖项打包进输出文件
  --outfile=...         输出文件 (用于一个入口点)
  --outdir=...          输出目录 (用于多个入口点)
  --sourcemap            发出一个源映射
  --error-limit=...     最大错误计数,0是禁用 (默认值为10)
  --target=...          语言目标 (默认esnext)

  --minify              设置所有 --minify-* flags
  --minify-whitespace   移除空格
  --minify-identifiers  缩短标识符
  --minify-syntax       使用较短的等效语法

  --define:K=V          解析时用V替换K
  --jsx-factory=...     用来替换React.createElement的内容
  --jsx-fragment=...    用来替换React.Fragment的内容

  --trace=...           在这个文件中写入一个CPU trace
  --cpuprofile=...     在这个文件中写入一个CPU profile

Example:
  # Produces dist/entry_point.js and dist/entry_point.js.map
  esbuild --bundle entry_point.js --outdir=dist --minify --sourcemap

與 React 一起使用

要將 esbuild 與 React 一起使用:

  • 確保所有JSX語法都放在.jsx文件而不是.js文件中,因為esbuild使用文件擴展名來確定要解析的語法。

  • 如果你使用的是TypeScript,請先運行’tsc’以將.tsx文件轉換為.jsx或.js文件。

  • 如果你使用esbuild打包React自身,而不是在HTML中使用標記添加它,則需要傳遞’–define:process.env.NODE_ENV=“development”’ 或’–define:process.env.NODE_ENV=“production”’以在命令行上運行esbuild。

  • 如果你使用的是Preact而不是React,則還需要傳遞–jsx-factory = preact.h –jsx-fragment = preact.Fragment在命令行上運行esbuild。

例如,如果你有一個名為 example.jsx 的文件,其中包含以下內容:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(
  

Hello, world!

, document.getElementById('root') );

那麼用於開發構建:

esbuild example.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js

用於生產構建:

esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js

項目地址

https://github.com/evanw/esbuild