Bun チュートリアル

日本語

English
简体中文
繁體中文
Русский
한국어

日本語

English
简体中文
繁體中文
Русский
한국어

Appearance

Bun には、バンドルサイズを 80% 以上削減し（コードベースによる）、出力コードをより高速に実行できるようにする高速な JavaScript と TypeScript のミニファイヤーが含まれています。このミニファイヤーは、定数畳み込み、デッドコード削除、構文変換など、数十回の最適化を実行します。他のミニファイヤーとは異なり、Bun のミニファイヤーは印刷するコードが少なくなるため、bun build の実行が高速になります。

CLI の使用方法 ​

すべてのミニファイを有効にする ​

すべてのミニファイモードを有効にするには、--minify フラグを使用します：

bash
bun build ./index.ts --minify --outfile=out.js

--minify フラグは自動的に以下を有効にします：

  • 空白のミニファイ
  • 構文のミニファイ
  • 識別子のミニファイ

本番モード ​

--production フラグは自動的にミニファイを有効にします：

bash
bun build ./index.ts --production --outfile=out.js

--production フラグはまた：

  • process.env.NODE_ENV を production に設定します
  • 本番モードの JSX インポートと変換を有効にします

細かい制御 ​

特定のミニファイモードを個別に有効にできます：

bash
# 空白のみ削除
bun build ./index.ts --minify-whitespace --outfile=out.js

# 構文のみミニファイ
bun build ./index.ts --minify-syntax --outfile=out.js

# 識別子のみミニファイ
bun build ./index.ts --minify-identifiers --outfile=out.js

# 特定のモードを組み合わせる
bun build ./index.ts --minify-whitespace --minify-syntax --outfile=out.js

JavaScript API ​

Bun のバンドラーをプログラムで使用する場合、minify オプションを通じてミニファイを設定します：

ts
await Bun.build({
  entrypoints: ["./index.ts"],
  outdir: "./out",
  minify: true, // すべてのミニファイモードを有効にする
});

細かい制御には、オブジェクトを渡します：

ts
await Bun.build({
  entrypoints: ["./index.ts"],
  outdir: "./out",
  minify: {
    whitespace: true,
    syntax: true,
    identifiers: true,
  },
});

ミニファイモード ​

Bun のミニファイヤーには、個別にまたは組み合わせて有効にできる 3 つの独立したモードがあります。

空白のミニファイ（--minify-whitespace） ​

出力から不要な空白、改行、書式をすべて削除します。

構文のミニファイ（--minify-syntax） ​

JavaScript 構文をより短い等価形式に書き換え、定数畳み込み、デッドコード削除、その他の最適化を実行します。

識別子のミニファイ（--minify-identifiers） ​

使用頻度に基づく最適化を使用して、ローカル変数と関数名をより短い識別子に名前変更します。

すべての変換 ​

ブールリテラルの短縮 ​

モード: --minify-syntax

ブールリテラルをより短い式に変換します。

ts
true
false
js
!0
!1

ブール代数の最適化 ​

モード: --minify-syntax

論理規則を使用してブール式を簡素化します。

ts
!!x
x === true
x && true
x || false
!true
!false
js
x
x
x
x
!1
!0

undefined の短縮 ​

モード: --minify-syntax

undefined をより短い等価物に置き換えます。

ts
undefined
let x = undefined;
js
void 0
let x=void 0;

undefined 等値の最適化 ​

モード: --minify-syntax

undefined との緩い等値チェックを最適化します。

ts
x == undefined
x != undefined
js
x == null
x != null

Infinity の短縮 ​

モード: --minify-syntax

Infinity を数式に変換します。

ts
Infinity
-Infinity
js
1/0
-1/0

typeof の最適化 ​

モード: --minify-syntax

typeof 比較を最適化し、定数の typeof 式を評価します。

ts
typeof x === 'undefined'
typeof x !== 'undefined'
typeof require
typeof null
typeof true
typeof 123
typeof "str"
typeof 123n
js
typeof x>'u'
typeof x<'u'
"function"
"object"
"boolean"
"number"
"string"
"bigint"

数値のフォーマット ​

モード: --minify-syntax

数値を最もコンパクトな表現でフォーマットします。

ts
10000
100000
1000000
1.0
-42.0
js
1e4
1e5
1e6
1
-42

算術定数の畳み込み ​

モード: --minify-syntax

コンパイル時に算術演算を評価します。

ts
1 + 2
10 - 5
3 * 4
10 / 2
10 % 3
2 ** 3
js
3
5
12
5
1
8

ビット演算定数の畳み込み ​

モード: --minify-syntax

コンパイル時にビット演算を評価します。

ts
5 & 3
5 | 3
5 ^ 3
8 << 2
32 >> 2
~5
js
1
7
6
32
8
-6

文字列連結 ​

モード: --minify-syntax

コンパイル時に文字列リテラルを結合します。

ts
"a" + "b"
"x" + 123
"foo" + "bar" + "baz"
js
"ab"
"x123"
"foobarbaz"

文字列インデックス ​

モード: --minify-syntax

コンパイル時に文字列文字アクセスを評価します。

ts
"foo"[2]
"hello"[0]
js
"o"
"h"

テンプレートリテラルの畳み込み ​

モード: --minify-syntax

定数式を含むテンプレートリテラルを評価します。

ts
`a${123}b`
`result: ${5 + 10}`
js
"a123b"
"result: 15"

テンプレートリテラルから文字列への変換 ​

モード: --minify-syntax

単純なテンプレートリテラルを通常の文字列に変換します。

ts
`Hello World`
`Line 1
Line 2`
js
"Hello World"
"Line 1\nLine 2"

文字列クォートの最適化 ​

モード: --minify-syntax

エスケープを最小限に抑えるために最適なクォート文字を選択します。

ts
"It's a string"
'He said "hello"'
`Simple string`
js
"It's a string"
'He said "hello"'
"Simple string"

配列スプレッドのインライン化 ​

モード: --minify-syntax

定数配列で配列スプレッド演算をインライン化します。

ts
[1, ...[2, 3], 4]
[...[a, b]]
js
[1,2,3,4]
[a,b]

配列インデックス ​

モード: --minify-syntax

コンパイル時に定数配列アクセスを評価します。

ts
[x][0]
['a', 'b', 'c'][1]
['a', , 'c'][1]
js
x
'b'
void 0

プロパティアクセスの最適化 ​

モード: --minify-syntax

可能な場合、ブラケット記法をドット記法に変換します。

ts
obj["property"]
obj["validName"]
obj["123"]
obj["invalid-name"]
js
obj.property
obj.validName
obj["123"]
obj["invalid-name"]

比較の畳み込み ​

モード: --minify-syntax

コンパイル時に定数比較を評価します。

ts
3 < 5
5 > 3
3 <= 3
5 >= 6
"a" < "b"
js
!0
!0
!0
!1
!0

論理演算の畳み込み ​

モード: --minify-syntax

定数値を持つ論理演算を簡素化します。

ts
true && x
false && x
true || x
false || x
js
x
!1
!0
x

Nullish 結合の畳み込み ​

モード: --minify-syntax

既知の値で nullish 結合を評価します。

ts
null ?? x
undefined ?? x
42 ?? x
js
x
x
42

カンマ式の簡素化 ​

モード: --minify-syntax

カンマシーケンスから副作用のない式を削除します。

ts
(0, x)
(123, "str", x)
js
x
x

三項条件の畳み込み ​

モード: --minify-syntax

定数条件を持つ条件式を評価します。

ts
true ? a : b
false ? a : b
x ? true : false
x ? false : true
js
a
b
x ? !0 : !1
x ? !1 : !0

単項式の畳み込み ​

モード: --minify-syntax

単項演算を簡素化します。

ts
+123
+"123"
-(-x)
~~x
!!x
js
123
123
123
123
x
~~x
!!x
x

二重否定の削除 ​

モード: --minify-syntax

不要な二重否定を削除します。

ts
!!x
!!!x
js
x
!x

if 文の最適化 ​

モード: --minify-syntax

定数条件を持つ if 文を最適化します。

ts
if (true) x;
if (false) x;
if (x) { a; }
if (x) {} else y;
js
x;
// 削除
if(x)a;
if(!x)y;

デッドコード削除 ​

モード: --minify-syntax

到達不能なコードと副作用のないコードを削除します。

ts
if (false) {
  unreachable();
}
function foo() {
  return x;
  deadCode();
}
js
function foo(){return x}

到達不能なブランチの削除 ​

モード: --minify-syntax

実行されることのないブランチを削除します。

ts
while (false) {
  neverRuns();
}
js
// 完全に削除

空ブロックの削除 ​

モード: --minify-syntax

空ブロックと不要な中括弧を削除します。

ts
{ }
if (x) { }
js
;
// 削除

単一文ブロックの展開 ​

モード: --minify-syntax

単一文の周りの不要な中括弧を削除します。

ts
if (condition) {
  doSomething();
}
js
if(condition)doSomething();

TypeScript 列挙型のインライン化 ​

モード: --minify-syntax

コンパイル時に TypeScript 列挙型の値をインライン化します。

ts
enum Color { Red, Green, Blue }
const x = Color.Red;
js
const x=0;

Pure アノテーションのサポート ​

モード: 常に有効

ツリーシェイクのために /*@__PURE__*/ アノテーションを尊重します。

ts
const x = /*@__PURE__*/ expensive();
// x が使用されていない場合...
js
// 完全に削除

識別子の名前変更 ​

モード: --minify-identifiers

使用頻度に基づいてローカル変数をより短い名前に名前変更します。

ts
function calculateSum(firstNumber, secondNumber) {
  const result = firstNumber + secondNumber;
  return result;
}
js
function a(b,c){const d=b+c;return d}

命名戦略:

  • 最も頻繁に使用される識別子は最短の名前を取得します（a、b、c...）
  • 単一文字：a-z（26 個の名前）
  • 二重文字：aa-zz（676 個の名前）
  • 必要に応じて三重文字以降

保持される識別子:

  • JavaScript キーワードと予約語
  • グローバル識別子
  • 名前付きエクスポート（API を維持するため）
  • CommonJS 名：exports、module

空白の削除 ​

モード: --minify-whitespace

すべての不要な空白を削除します。

ts
function add(a, b) {
    return a + b;
}
let x = 10;
js
function add(a,b){return a+b;}let x=10;

セミコロンの最適化 ​

モード: --minify-whitespace

必要な場合にのみセミコロンを挿入します。

ts
let a = 1;
let b = 2;
return a + b;
js
let a=1;let b=2;return a+b

演算子の間隔の削除 ​

モード: --minify-whitespace

演算子の周りのスペースを削除します。

ts
a + b
x = y * z
foo && bar || baz
js
a+b
x=y*z
foo&&bar||baz

コメントの削除 ​

モード: --minify-whitespace

重要なライセンスコメントを除くコメントを削除します。

ts
// このコメントは削除されます
/* これも削除されます */
/*! しかし、このライセンスコメントは保持されます */
function test() { /* インラインコメント */ }
js
/*! しかし、このライセンスコメントは保持されます */
function test(){}

オブジェクトと配列のフォーマット ​

モード: --minify-whitespace

オブジェクトと配列リテラル内の空白を削除します。

ts
const obj = {
    name: "John",
    age: 30
};
const arr = [1, 2, 3];
js
const obj={name:"John",age:30};const arr=[1,2,3];

制御フローのフォーマット ​

モード: --minify-whitespace

制御構造内の空白を削除します。

ts
if (condition) {
    doSomething();
}
for (let i = 0; i < 10; i++) {
    console.log(i);
}
js
if(condition)doSomething();for(let i=0;i<10;i++)console.log(i);

関数のフォーマット ​

モード: --minify-whitespace

関数宣言内の空白を削除します。

ts
function myFunction(param1, param2) {
    return param1 + param2;
}
const arrow = (a, b) => a + b;
js
function myFunction(a,b){return a+b}const arrow=(a,b)=>a+b;

括弧の最小化 ​

モード: 常に有効

演算子の優先順位に必要な場合にのみ括弧を追加します。

ts
(a + b) * c
a + (b * c)
((x))
js
(a+b)*c
a+b*c
x

プロパティのマングル ​

モード: --minify-identifiers（設定あり）

設定されている場合、オブジェクトプロパティをより短い名前に名前変更します。

ts
obj.longPropertyName
js
obj.a

テンプレートリテラル値の畳み込み ​

モード: --minify-syntax

非文字列の補間値を文字列に変換し、テンプレートに畳み込みます。

ts
`hello ${123}`
`value: ${true}`
`result: ${null}`
`status: ${undefined}`
`big: ${10n}`
js
"hello 123"
"value: true"
"result: null"
"status: undefined"
"big: 10"

文字列長の定数畳み込み ​

モード: --minify-syntax

コンパイル時に文字列リテラルの .length プロパティを評価します。

ts
"hello world".length
"test".length
js
11
4

コンストラクター呼び出しの簡素化 ​

モード: --minify-syntax

組み込み型のコンストラクター呼び出しを簡素化します。

ts
new Object()
new Object(null)
new Object({a: 1})
new Array()
new Array(x, y)
js
{}
{}
{a:1}
[]
[x,y]

単一プロパティオブジェクトのインライン化 ​

モード: --minify-syntax

単一プロパティを持つオブジェクトのプロパティアクセスをインライン化します。

ts
({fn: () => console.log('hi')}).fn()
js
(() => console.log('hi'))()

文字列 charCodeAt の定数畳み込み ​

モード: 常に有効

ASCII 文字の文字列リテラルに対して charCodeAt() を評価します。

ts
"hello".charCodeAt(1)
"A".charCodeAt(0)
js
101
65

Void 0 等値から null 等値へ ​

モード: --minify-syntax

等価であるため、void 0 との緩い等値チェックを null に変換します。

ts
x == void 0
x != void 0
js
x == null
x != null

否定演算子の最適化 ​

モード: --minify-syntax

カンマ式を通じて否定演算子を移動します。

ts
-(a, b)
-(x, y, z)
js
a,-b
x,y,-z

Import.meta プロパティのインライン化 ​

モード: バンドルモード

値が既知の場合、ビルド時に import.meta プロパティをインライン化します。

ts
import.meta.dir
import.meta.file
import.meta.path
import.meta.url
js
"/path/to/directory"
"filename.js"
"/full/path/to/file.js"
"file:///full/path/to/file.js"

変数宣言の結合 ​

モード: --minify-syntax

同じ型の変数宣言を結合します。

ts
let a = 1;
let b = 2;
const c = 3;
const d = 4;
js
let a=1,b=2;
const c=3,d=4;

式文の結合 ​

モード: --minify-syntax

カンマ演算子を使用して隣接する式文を結合します。

ts
console.log(1);
console.log(2);
console.log(3);
js
console.log(1),console.log(2),console.log(3);

return 文の結合 ​

モード: --minify-syntax

カンマ演算子を使用して return の前の式を結合します。

ts
console.log(x);
return y;
js
return console.log(x),y;

throw 文の結合 ​

モード: --minify-syntax

カンマ演算子を使用して throw の前の式を結合します。

ts
console.log(x);
throw new Error();
js
throw(console.log(x),new Error());

TypeScript 列挙型のクロスモジュールインライン化 ​

モード: --minify-syntax（バンドルモード）

モジュール境界を越えて列挙型の値をインライン化します。

ts
// lib.ts
export enum Color { Red, Green, Blue }

// Input (main.ts)
import { Color } from './lib';
const x = Color.Red;
js
const x=0;

計算プロパティ列挙型のインライン化 ​

モード: --minify-syntax

計算オブジェクトプロパティで使用される列挙型の値をインライン化します。

ts
enum Keys { FOO = 'foo' }
const obj = { [Keys.FOO]: value }
js
const obj={foo:value}

文字列数値から数値インデックスへ ​

モード: --minify-syntax

文字列数値プロパティアクセスを数値インデックスに変換します。

ts
obj["0"]
arr["5"]
js
obj[0]
arr[5]

アロー関数本体の短縮 ​

モード: 常に有効

アロー関数が値を返すのみである場合、式本体構文を使用します。

ts
() => { return x; }
(a) => { return a + 1; }
js
() => x
a => a + 1

オブジェクトプロパティの短縮 ​

モード: 常に有効

プロパティ名と値の識別子が一致する場合、短縮構文を使用します。

ts
{ x: x, y: y }
{ name: name, age: age }
js
{ x, y }
{ name, age }

メソッドの短縮 ​

モード: 常に有効

オブジェクトリテラルでメソッド短縮構文を使用します。

ts
{
  foo: function() {},
  bar: async function() {}
}
js
{
  foo() {},
  async bar() {}
}

デバッガーステートメントの削除 ​

モード: --drop=debugger

コードから debugger 文を削除します。

ts
function test() {
  debugger;
  return x;
}
js
function test(){return x}

console 呼び出しの削除 ​

モード: --drop=console

コードからすべての console.* メソッド呼び出しを削除します。

ts
console.log("debug");
console.warn("warning");
x = console.error("error");
js
void 0;
void 0;
x=void 0;

カスタム関数呼び出しの削除 ​

モード: --drop=<name>

指定されたグローバル関数またはメソッドへの呼び出しを削除します。

ts
assert(condition);
obj.assert(test);
js
void 0;
void 0;

名前の保持 ​

識別子をミニファイする際、デバッグ目的で元の関数とクラスの名前を保持したい場合があります。--keep-names フラグを使用します：

bash
bun build ./index.ts --minify --keep-names --outfile=out.js

または JavaScript API で：

ts
await Bun.build({
  entrypoints: ["./index.ts"],
  outdir: "./out",
  minify: {
    identifiers: true,
    keepNames: true,
  },
});

これにより、コード内の実際の識別子名をミニファイしながらも、関数とクラスの .name プロパティを保持します。

結合例 ​

3 つのミニファイモードをすべて一緒に使用します：

ts
const myVariable = 42;

const myFunction = () => {
  const isValid = true;
  const result = undefined;
  return isValid ? myVariable : result;
};

const output = myFunction();
js
// --minify での出力（49 バイト、69% 削減）
const a=42,b=()=>{const c=!0,d=void 0;return c?a:d},e=b();

ミニファイを使用するタイミング ​

--minify を使用する場合:

  • 本番バンドル
  • CDN 帯域幅コストの削減
  • ページ読み込み時間の改善

個別のモードを使用する場合:

  • --minify-whitespace: 意味的な変更なしにクイックなサイズ削減
  • --minify-syntax: デバッグのために読みやすい識別子を保持しながら出力を小さく
  • --minify-identifiers: 最大のサイズ削減（より良いスタックトレースのために --keep-names と組み合わせる）

ミニファイを避ける場合:

  • 開発ビルド（デバッグが困難になる）
  • 読みやすいエラーメッセージが必要な場合
  • コンシューマーがソースを読む可能性のあるライブラリ

Bun by www.bunjs.com.cn 編集

MIT ライセンス | Copyright © 2023-現在