Skip to content

Bun enthält einen schnellen JavaScript- und TypeScript-Minifierer, der Bundle-Größen um 80% oder mehr reduzieren kann (abhängig von der Codebasis) und den Ausgabecode schneller ausführen lässt. Der Minifierer führt Dutzende von Optimierungen durch, einschließlich Constant Folding, Dead-Code-Eliminierung und Syntax-Transformationen. Im Gegensatz zu anderen Minifierern lässt Bun's Minifierer bun build schneller laufen, da weniger Code gedruckt werden muss.

CLI-Verwendung

Alle Minifizierungen aktivieren

Verwenden Sie die --minify-Flag, um alle Minifizierungsmodi zu aktivieren:

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

Die --minify-Flag aktiviert automatisch:

  • Leerzeichen-Minifizierung
  • Syntax-Minifizierung
  • Identifier-Minifizierung

Produktionsmodus

Die --production-Flag aktiviert automatisch die Minifizierung:

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

Die --production-Flag setzt außerdem:

  • process.env.NODE_ENV auf production
  • Aktiviert den Produktionsmodus-JSX-Import und die Transformation

Granulare Steuerung

Sie können spezifische Minifizierungsmodi einzeln aktivieren:

bash
# Nur Leerzeichen entfernen
bun build ./index.ts --minify-whitespace --outfile=out.js

# Nur Syntax minifizieren
bun build ./index.ts --minify-syntax --outfile=out.js

# Nur Identifier minifizieren
bun build ./index.ts --minify-identifiers --outfile=out.js

# Bestimmte Modi kombinieren
bun build ./index.ts --minify-whitespace --minify-syntax --outfile=out.js

JavaScript-API

Bei der programmatischen Verwendung von Bun's Bundler konfigurieren Sie die Minifizierung über die minify-Option:

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

Für granulare Steuerung übergeben Sie ein Objekt:

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

Minifizierungsmodi

Bun's Minifierer hat drei unabhängige Modi, die separat oder kombiniert aktiviert werden können.

Leerzeichen-Minifizierung (--minify-whitespace)

Entfernt alle unnötigen Leerzeichen, Zeilenumbrüche und Formatierungen aus der Ausgabe.

Syntax-Minifizierung (--minify-syntax)

Schreibt JavaScript-Syntax in kürzere äquivalente Formen um und führt Constant Folding, Dead-Code-Eliminierung und andere Optimierungen durch.

Identifier-Minifizierung (--minify-identifiers)

Benennt lokale Variablen und Funktionsnamen in kürzere Identifier unter Verwendung frequenzbasierter Optimierung um.

Alle Transformationen

Boolean-Literal-Kürzung

Modus: --minify-syntax

Konvertiert Boolean-Literale in kürzere Ausdrücke.

ts
true
false
js
!0
!1

Boolean-Algebra-Optimierungen

Modus: --minify-syntax

Vereinfacht boolesche Ausdrücke unter Verwendung logischer Regeln.

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

Undefined-Kürzung

Modus: --minify-syntax

Ersetzt undefined durch kürzere Äquivalente.

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

Undefined-Gleichheitsoptimierung

Modus: --minify-syntax

Optimiert lose Gleichheitsprüfungen mit undefined.

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

Infinity-Kürzung

Modus: --minify-syntax

Konvertiert Infinity in mathematische Ausdrücke.

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

Typeof-Optimierungen

Modus: --minify-syntax

Optimiert typeof-Vergleiche und wertet konstante typeof-Ausdrücke aus.

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"

Zahlenformatierung

Modus: --minify-syntax

Formatiert Zahlen in der kompaktesten Darstellung.

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

Arithmetisches Constant Folding

Modus: --minify-syntax

Wertet arithmetische Operationen zur Kompilierzeit aus.

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

Bitweises Constant Folding

Modus: --minify-syntax

Wertet bitweise Operationen zur Kompilierzeit aus.

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

String-Verkettung

Modus: --minify-syntax

Kombiniert String-Literale zur Kompilierzeit.

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

String-Indexierung

Modus: --minify-syntax

Wertet String-Zeichenzugriff zur Kompilierzeit aus.

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

Template-Literal-Faltung

Modus: --minify-syntax

Wertet Template-Literale mit konstanten Ausdrücken aus.

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

Template-Literal-zu-String-Konvertierung

Modus: --minify-syntax

Konvertiert einfache Template-Literale in reguläre Strings.

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

String-Anführungszeichen-Optimierung

Modus: --minify-syntax

Wählt das optimale Anführungszeichen, um Escapes zu minimieren.

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

Array-Spread-Inlining

Modus: --minify-syntax

Fügt Array-Spread-Operationen mit konstanten Arrays inline ein.

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

Array-Indexierung

Modus: --minify-syntax

Wertet konstanten Array-Zugriff zur Kompilierzeit aus.

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

Eigenschaftszugriffsoptimierung

Modus: --minify-syntax

Konvertiert Klammer-Notation in Punkt-Notation, wenn möglich.

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

Vergleichsfaltung

Modus: --minify-syntax

Wertet konstante Vergleiche zur Kompilierzeit aus.

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

Logische Operationsfaltung

Modus: --minify-syntax

Vereinfacht logische Operationen mit konstanten Werten.

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

Nullish-Coalescing-Faltung

Modus: --minify-syntax

Wertet Nullish-Coalescing mit bekannten Werten aus.

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

Komma-Ausdrucksvereinfachung

Modus: --minify-syntax

Entfernt nebenwirkungsfreie Ausdrücke aus Komma-Sequenzen.

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

Ternäre Bedingungsfaltung

Modus: --minify-syntax

Wertet bedingte Ausdrücke mit konstanten Bedingungen aus.

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

Unäre Ausdrucksfaltung

Modus: --minify-syntax

Vereinfacht unäre Operationen.

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

Doppelte Negationsentfernung

Modus: --minify-syntax

Entfernt unnötige doppelte Negationen.

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

If-Anweisungsoptimierung

Modus: --minify-syntax

Optimiert if-Anweisungen mit konstanten Bedingungen.

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

Dead-Code-Eliminierung

Modus: --minify-syntax

Entfernt nicht erreichbaren Code und Code ohne Nebenwirkungen.

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

Unerreichbare Zweigentfernung

Modus: --minify-syntax

Entfernt Zweige, die niemals ausgeführt werden können.

ts
while (false) {
  neverRuns();
}
js
// vollständig entfernt

Leere Blockentfernung

Modus: --minify-syntax

Entfernt leere Blöcke und unnötige geschweifte Klammern.

ts
{ }
if (x) { }
js
;
// entfernt

Einzelanweisungs-Blockentpackung

Modus: --minify-syntax

Entfernt unnötige geschweifte Klammern um einzelne Anweisungen.

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

TypeScript-Enum-Inlining

Modus: --minify-syntax

Fügt TypeScript-Enum-Werte zur Kompilierzeit inline ein.

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

Pure-Annotation-Unterstützung

Modus: Immer aktiv

Respektiert /*@__PURE__*/-Annotationen für Tree Shaking.

ts
const x = /*@__PURE__*/ expensive();
// Wenn x ungenutzt ist...
js
// vollständig entfernt

Identifier-Umbenennung

Modus: --minify-identifiers

Benennt lokale Variablen in kürzere Namen basierend auf der Verwendungshäufigkeit um.

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

Benennungsstrategie:

  • Am häufigsten verwendete Identifier erhalten die kürzesten Namen (a, b, c...)
  • Einzelne Buchstaben: a-z (26 Namen)
  • Doppelte Buchstaben: aa-zz (676 Namen)
  • Dreifache Buchstaben und darüber hinaus nach Bedarf

Erhaltene Identifier:

  • JavaScript-Schlüsselwörter und reservierte Wörter
  • Globale Identifier
  • Benannte Exporte (zur API-Erhaltung)
  • CommonJS-Namen: exports, module

Leerzeichenentfernung

Modus: --minify-whitespace

Entfernt alle unnötigen Leerzeichen.

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

Semikolon-Optimierung

Modus: --minify-whitespace

Fügt Semikolons nur ein, wenn notwendig.

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

Operatorabstandsentfernung

Modus: --minify-whitespace

Entfernt Leerzeichen um Operatoren.

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

Kommentarentfernung

Modus: --minify-whitespace

Entfernt Kommentare außer wichtigen Lizenzkommentaren.

ts
// Dieser Kommentar wird entfernt
/* Ebenso dieser */
/*! Aber dieser Lizenzkommentar wird behalten */
function test() { /* Inline-Kommentar */ }
js
/*! Aber dieser Lizenzkommentar wird behalten */
function test(){}

Objekt- und Array-Formatierung

Modus: --minify-whitespace

Entfernt Leerzeichen in Objekt- und Array-Literalen.

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

Kontrollfluss-Formatierung

Modus: --minify-whitespace

Entfernt Leerzeichen in Kontrollstrukturen.

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);

Funktionsformatierung

Modus: --minify-whitespace

Entfernt Leerzeichen in Funktionsdeklarationen.

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;

Klammerminimierung

Modus: Immer aktiv

Fügt Klammern nur hinzu, wenn für Operatorpräzedenz notwendig.

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

Eigenschaftsverstümmelung

Modus: --minify-identifiers (mit Konfiguration)

Benennt Objekteigenschaften in kürzere Namen um, wenn konfiguriert.

ts
obj.longPropertyName
js
obj.a

Template-Literal-Wertfaltung

Modus: --minify-syntax

Konvertiert nicht-string interpolierte Werte in Strings und fügt sie in das Template ein.

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

String-Länge-Constant-Folding

Modus: --minify-syntax

Wertet .length-Eigenschaft auf String-Literalen zur Kompilierzeit aus.

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

Konstruktoraufrufvereinfachung

Modus: --minify-syntax

Vereinfacht Konstruktoraufrufe für eingebaute Typen.

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

Einzelnes Eigenschaftsobjekt-Inlining

Modus: --minify-syntax

Fügt Eigenschaftszugriff für Objekte mit einer einzelnen Eigenschaft inline ein.

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

String-charCodeAt-Constant-Folding

Modus: Immer aktiv

Wertet charCodeAt() auf String-Literalen für ASCII-Zeichen aus.

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

Void-0-Gleichheit-zu-Null-Gleichheit

Modus: --minify-syntax

Konvertiert lose Gleichheitsprüfungen mit void 0 zu null, da sie äquivalent sind.

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

Negationsoperator-Optimierung

Modus: --minify-syntax

Verschiebt Negationsoperator durch Komma-Ausdrücke.

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

Import.meta-Eigenschafts-Inlining

Modus: Bundle-Modus

Fügt import.meta-Eigenschaften zur Build-Zeit inline ein, wenn Werte bekannt sind.

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"

Variablendeklarationszusammenführung

Modus: --minify-syntax

Führt benachbarte Variablendeklarationen desselben Typs zusammen.

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

Ausdrucksanweisungszusammenführung

Modus: --minify-syntax

Führt benachbarte Ausdrucksanweisungen mit Kommaoperator zusammen.

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

Return-Anweisungszusammenführung

Modus: --minify-syntax

Führt Ausdrücke vor return mit Kommaoperator zusammen.

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

Throw-Anweisungszusammenführung

Modus: --minify-syntax

Führt Ausdrücke vor throw mit Kommaoperator zusammen.

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

TypeScript-Enum-Modul-übergreifendes Inlining

Modus: --minify-syntax (Bundle-Modus)

Fügt Enum-Werte über Modulgrenzen hinweg inline ein.

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

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

Computed-Property-Enum-Inlining

Modus: --minify-syntax

Fügt Enum-Werte inline ein, die als berechnete Objekteigenschaften verwendet werden.

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

String-Nummer-zu-numerischem-Index

Modus: --minify-syntax

Konvertiert String-numerischen Eigenschaftszugriff in numerischen Index.

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

Pfeilfunktionskörper-Kürzung

Modus: Immer aktiv

Verwendet Ausdruckskörper-Syntax, wenn eine Pfeilfunktion nur einen Wert zurückgibt.

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

Objekteigenschafts-Kurzschreibweise

Modus: Immer aktiv

Verwendet Kurzschreibweise-Syntax, wenn Eigenschaftsname und Wert-Identifier übereinstimmen.

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

Method-Kurzschreibweise

Modus: Immer aktiv

Verwendet Method-Kurzschreibweise-Syntax in Objekt-Literalen.

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

Debugger-Anweisungen verwerfen

Modus: --drop=debugger

Entfernt debugger-Anweisungen aus dem Code.

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

Console-Aufrufe verwerfen

Modus: --drop=console

Entfernt alle console.*-Methodenaufrufe aus dem Code.

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

Benutzerdefinierte Funktionsaufrufe verwerfen

Modus: --drop=<name>

Entfernt Aufrufe von angegebenen globalen Funktionen oder Methoden.

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

Namen behalten

Beim Minifizieren von Identifiern möchten Sie möglicherweise ursprüngliche Funktions- und Klassennamen für Debugging-Zwecke erhalten. Verwenden Sie die --keep-names-Flag:

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

Oder in der JavaScript-API:

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

Dies erhält die .name-Eigenschaft auf Funktionen und Klassen, während die tatsächlichen Identifiernamen im Code weiterhin minifiziert werden.

Kombiniertes Beispiel

Alle drei Minifizierungsmodi zusammen verwenden:

ts
const myVariable = 42;

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

const output = myFunction();
js
// Ausgabe mit --minify (49 bytes, 69% Reduzierung)
const a=42,b=()=>{const c=!0,d=void 0;return c?a:d},e=b();

Wann Minifizierung verwendet werden sollte

Verwenden Sie --minify für:

  • Produktions-Bundles
  • Reduzierung von CDN-Bandbreitenkosten
  • Verbesserung der Seitenladezeiten

Verwenden Sie einzelne Modi für:

  • --minify-whitespace: Schnelle Größenreduzierung ohne semantische Änderungen
  • --minify-syntax: Kleinere Ausgabe bei Beibehaltung lesbarer Identifier für Debugging
  • --minify-identifiers: Maximale Größenreduzierung (kombinieren mit --keep-names für bessere Stack-Traces)

Vermeiden Sie Minifizierung für:

  • Entwicklungs-Builds (schwerer zu debuggen)
  • Wenn Sie lesbare Fehlermeldungen benötigen
  • Bibliotheken, bei denen Konsumenten den Quellcode lesen können

Bun von www.bunjs.com.cn bearbeitet