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:
bun build ./index.ts --minify --outfile=out.jsDie --minify-Flag aktiviert automatisch:
- Leerzeichen-Minifizierung
- Syntax-Minifizierung
- Identifier-Minifizierung
Produktionsmodus
Die --production-Flag aktiviert automatisch die Minifizierung:
bun build ./index.ts --production --outfile=out.jsDie --production-Flag setzt außerdem:
process.env.NODE_ENVaufproduction- Aktiviert den Produktionsmodus-JSX-Import und die Transformation
Granulare Steuerung
Sie können spezifische Minifizierungsmodi einzeln aktivieren:
# 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.jsJavaScript-API
Bei der programmatischen Verwendung von Bun's Bundler konfigurieren Sie die Minifizierung über die minify-Option:
await Bun.build({
entrypoints: ["./index.ts"],
outdir: "./out",
minify: true, // Alle Minifizierungsmodi aktivieren
});Für granulare Steuerung übergeben Sie ein Objekt:
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.
true
false!0
!1Boolean-Algebra-Optimierungen
Modus: --minify-syntax
Vereinfacht boolesche Ausdrücke unter Verwendung logischer Regeln.
!!x
x === true
x && true
x || false
!true
!falsex
x
x
x
!1
!0Undefined-Kürzung
Modus: --minify-syntax
Ersetzt undefined durch kürzere Äquivalente.
undefined
let x = undefined;void 0
let x=void 0;Undefined-Gleichheitsoptimierung
Modus: --minify-syntax
Optimiert lose Gleichheitsprüfungen mit undefined.
x == undefined
x != undefinedx == null
x != nullInfinity-Kürzung
Modus: --minify-syntax
Konvertiert Infinity in mathematische Ausdrücke.
Infinity
-Infinity1/0
-1/0Typeof-Optimierungen
Modus: --minify-syntax
Optimiert typeof-Vergleiche und wertet konstante typeof-Ausdrücke aus.
typeof x === 'undefined'
typeof x !== 'undefined'
typeof require
typeof null
typeof true
typeof 123
typeof "str"
typeof 123ntypeof x>'u'
typeof x<'u'
"function"
"object"
"boolean"
"number"
"string"
"bigint"Zahlenformatierung
Modus: --minify-syntax
Formatiert Zahlen in der kompaktesten Darstellung.
10000
100000
1000000
1.0
-42.01e4
1e5
1e6
1
-42Arithmetisches Constant Folding
Modus: --minify-syntax
Wertet arithmetische Operationen zur Kompilierzeit aus.
1 + 2
10 - 5
3 * 4
10 / 2
10 % 3
2 ** 33
5
12
5
1
8Bitweises Constant Folding
Modus: --minify-syntax
Wertet bitweise Operationen zur Kompilierzeit aus.
5 & 3
5 | 3
5 ^ 3
8 << 2
32 >> 2
~51
7
6
32
8
-6String-Verkettung
Modus: --minify-syntax
Kombiniert String-Literale zur Kompilierzeit.
"a" + "b"
"x" + 123
"foo" + "bar" + "baz""ab"
"x123"
"foobarbaz"String-Indexierung
Modus: --minify-syntax
Wertet String-Zeichenzugriff zur Kompilierzeit aus.
"foo"[2]
"hello"[0]"o"
"h"Template-Literal-Faltung
Modus: --minify-syntax
Wertet Template-Literale mit konstanten Ausdrücken aus.
`a${123}b`
`result: ${5 + 10}`"a123b"
"result: 15"Template-Literal-zu-String-Konvertierung
Modus: --minify-syntax
Konvertiert einfache Template-Literale in reguläre Strings.
`Hello World`
`Line 1
Line 2`"Hello World"
"Line 1\nLine 2"String-Anführungszeichen-Optimierung
Modus: --minify-syntax
Wählt das optimale Anführungszeichen, um Escapes zu minimieren.
"It's a string"
'He said "hello"'
`Simple string`"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.
[1, ...[2, 3], 4]
[...[a, b]][1,2,3,4]
[a,b]Array-Indexierung
Modus: --minify-syntax
Wertet konstanten Array-Zugriff zur Kompilierzeit aus.
[x][0]
['a', 'b', 'c'][1]
['a', , 'c'][1]x
'b'
void 0Eigenschaftszugriffsoptimierung
Modus: --minify-syntax
Konvertiert Klammer-Notation in Punkt-Notation, wenn möglich.
obj["property"]
obj["validName"]
obj["123"]
obj["invalid-name"]obj.property
obj.validName
obj["123"]
obj["invalid-name"]Vergleichsfaltung
Modus: --minify-syntax
Wertet konstante Vergleiche zur Kompilierzeit aus.
3 < 5
5 > 3
3 <= 3
5 >= 6
"a" < "b"!0
!0
!0
!1
!0Logische Operationsfaltung
Modus: --minify-syntax
Vereinfacht logische Operationen mit konstanten Werten.
true && x
false && x
true || x
false || xx
!1
!0
xNullish-Coalescing-Faltung
Modus: --minify-syntax
Wertet Nullish-Coalescing mit bekannten Werten aus.
null ?? x
undefined ?? x
42 ?? xx
x
42Komma-Ausdrucksvereinfachung
Modus: --minify-syntax
Entfernt nebenwirkungsfreie Ausdrücke aus Komma-Sequenzen.
(0, x)
(123, "str", x)x
xTernäre Bedingungsfaltung
Modus: --minify-syntax
Wertet bedingte Ausdrücke mit konstanten Bedingungen aus.
true ? a : b
false ? a : b
x ? true : false
x ? false : truea
b
x ? !0 : !1
x ? !1 : !0Unäre Ausdrucksfaltung
Modus: --minify-syntax
Vereinfacht unäre Operationen.
+123
+"123"
-(-x)
~~x
!!x123
123
123
123
x
~~x
!!x
xDoppelte Negationsentfernung
Modus: --minify-syntax
Entfernt unnötige doppelte Negationen.
!!x
!!!xx
!xIf-Anweisungsoptimierung
Modus: --minify-syntax
Optimiert if-Anweisungen mit konstanten Bedingungen.
if (true) x;
if (false) x;
if (x) { a; }
if (x) {} else y;x;
// entfernt
if(x)a;
if(!x)y;Dead-Code-Eliminierung
Modus: --minify-syntax
Entfernt nicht erreichbaren Code und Code ohne Nebenwirkungen.
if (false) {
unreachable();
}
function foo() {
return x;
deadCode();
}function foo(){return x}Unerreichbare Zweigentfernung
Modus: --minify-syntax
Entfernt Zweige, die niemals ausgeführt werden können.
while (false) {
neverRuns();
}// vollständig entferntLeere Blockentfernung
Modus: --minify-syntax
Entfernt leere Blöcke und unnötige geschweifte Klammern.
{ }
if (x) { };
// entferntEinzelanweisungs-Blockentpackung
Modus: --minify-syntax
Entfernt unnötige geschweifte Klammern um einzelne Anweisungen.
if (condition) {
doSomething();
}if(condition)doSomething();TypeScript-Enum-Inlining
Modus: --minify-syntax
Fügt TypeScript-Enum-Werte zur Kompilierzeit inline ein.
enum Color { Red, Green, Blue }
const x = Color.Red;const x=0;Pure-Annotation-Unterstützung
Modus: Immer aktiv
Respektiert /*@__PURE__*/-Annotationen für Tree Shaking.
const x = /*@__PURE__*/ expensive();
// Wenn x ungenutzt ist...// vollständig entferntIdentifier-Umbenennung
Modus: --minify-identifiers
Benennt lokale Variablen in kürzere Namen basierend auf der Verwendungshäufigkeit um.
function calculateSum(firstNumber, secondNumber) {
const result = firstNumber + secondNumber;
return result;
}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.
function add(a, b) {
return a + b;
}
let x = 10;function add(a,b){return a+b;}let x=10;Semikolon-Optimierung
Modus: --minify-whitespace
Fügt Semikolons nur ein, wenn notwendig.
let a = 1;
let b = 2;
return a + b;let a=1;let b=2;return a+bOperatorabstandsentfernung
Modus: --minify-whitespace
Entfernt Leerzeichen um Operatoren.
a + b
x = y * z
foo && bar || baza+b
x=y*z
foo&&bar||bazKommentarentfernung
Modus: --minify-whitespace
Entfernt Kommentare außer wichtigen Lizenzkommentaren.
// Dieser Kommentar wird entfernt
/* Ebenso dieser */
/*! Aber dieser Lizenzkommentar wird behalten */
function test() { /* Inline-Kommentar */ }/*! Aber dieser Lizenzkommentar wird behalten */
function test(){}Objekt- und Array-Formatierung
Modus: --minify-whitespace
Entfernt Leerzeichen in Objekt- und Array-Literalen.
const obj = {
name: "John",
age: 30
};
const arr = [1, 2, 3];const obj={name:"John",age:30};const arr=[1,2,3];Kontrollfluss-Formatierung
Modus: --minify-whitespace
Entfernt Leerzeichen in Kontrollstrukturen.
if (condition) {
doSomething();
}
for (let i = 0; i < 10; i++) {
console.log(i);
}if(condition)doSomething();for(let i=0;i<10;i++)console.log(i);Funktionsformatierung
Modus: --minify-whitespace
Entfernt Leerzeichen in Funktionsdeklarationen.
function myFunction(param1, param2) {
return param1 + param2;
}
const arrow = (a, b) => a + b;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.
(a + b) * c
a + (b * c)
((x))(a+b)*c
a+b*c
xEigenschaftsverstümmelung
Modus: --minify-identifiers (mit Konfiguration)
Benennt Objekteigenschaften in kürzere Namen um, wenn konfiguriert.
obj.longPropertyNameobj.aTemplate-Literal-Wertfaltung
Modus: --minify-syntax
Konvertiert nicht-string interpolierte Werte in Strings und fügt sie in das Template ein.
`hello ${123}`
`value: ${true}`
`result: ${null}`
`status: ${undefined}`
`big: ${10n}`"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.
"hello world".length
"test".length11
4Konstruktoraufrufvereinfachung
Modus: --minify-syntax
Vereinfacht Konstruktoraufrufe für eingebaute Typen.
new Object()
new Object(null)
new Object({a: 1})
new Array()
new Array(x, y){}
{}
{a:1}
[]
[x,y]Einzelnes Eigenschaftsobjekt-Inlining
Modus: --minify-syntax
Fügt Eigenschaftszugriff für Objekte mit einer einzelnen Eigenschaft inline ein.
({fn: () => console.log('hi')}).fn()(() => console.log('hi'))()String-charCodeAt-Constant-Folding
Modus: Immer aktiv
Wertet charCodeAt() auf String-Literalen für ASCII-Zeichen aus.
"hello".charCodeAt(1)
"A".charCodeAt(0)101
65Void-0-Gleichheit-zu-Null-Gleichheit
Modus: --minify-syntax
Konvertiert lose Gleichheitsprüfungen mit void 0 zu null, da sie äquivalent sind.
x == void 0
x != void 0x == null
x != nullNegationsoperator-Optimierung
Modus: --minify-syntax
Verschiebt Negationsoperator durch Komma-Ausdrücke.
-(a, b)
-(x, y, z)a,-b
x,y,-zImport.meta-Eigenschafts-Inlining
Modus: Bundle-Modus
Fügt import.meta-Eigenschaften zur Build-Zeit inline ein, wenn Werte bekannt sind.
import.meta.dir
import.meta.file
import.meta.path
import.meta.url"/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.
let a = 1;
let b = 2;
const c = 3;
const d = 4;let a=1,b=2;
const c=3,d=4;Ausdrucksanweisungszusammenführung
Modus: --minify-syntax
Führt benachbarte Ausdrucksanweisungen mit Kommaoperator zusammen.
console.log(1);
console.log(2);
console.log(3);console.log(1),console.log(2),console.log(3);Return-Anweisungszusammenführung
Modus: --minify-syntax
Führt Ausdrücke vor return mit Kommaoperator zusammen.
console.log(x);
return y;return console.log(x),y;Throw-Anweisungszusammenführung
Modus: --minify-syntax
Führt Ausdrücke vor throw mit Kommaoperator zusammen.
console.log(x);
throw new Error();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.
// lib.ts
export enum Color { Red, Green, Blue }
// Input (main.ts)
import { Color } from './lib';
const x = Color.Red;const x=0;Computed-Property-Enum-Inlining
Modus: --minify-syntax
Fügt Enum-Werte inline ein, die als berechnete Objekteigenschaften verwendet werden.
enum Keys { FOO = 'foo' }
const obj = { [Keys.FOO]: value }const obj={foo:value}String-Nummer-zu-numerischem-Index
Modus: --minify-syntax
Konvertiert String-numerischen Eigenschaftszugriff in numerischen Index.
obj["0"]
arr["5"]obj[0]
arr[5]Pfeilfunktionskörper-Kürzung
Modus: Immer aktiv
Verwendet Ausdruckskörper-Syntax, wenn eine Pfeilfunktion nur einen Wert zurückgibt.
() => { return x; }
(a) => { return a + 1; }() => x
a => a + 1Objekteigenschafts-Kurzschreibweise
Modus: Immer aktiv
Verwendet Kurzschreibweise-Syntax, wenn Eigenschaftsname und Wert-Identifier übereinstimmen.
{ x: x, y: y }
{ name: name, age: age }{ x, y }
{ name, age }Method-Kurzschreibweise
Modus: Immer aktiv
Verwendet Method-Kurzschreibweise-Syntax in Objekt-Literalen.
{
foo: function() {},
bar: async function() {}
}{
foo() {},
async bar() {}
}Debugger-Anweisungen verwerfen
Modus: --drop=debugger
Entfernt debugger-Anweisungen aus dem Code.
function test() {
debugger;
return x;
}function test(){return x}Console-Aufrufe verwerfen
Modus: --drop=console
Entfernt alle console.*-Methodenaufrufe aus dem Code.
console.log("debug");
console.warn("warning");
x = console.error("error");void 0;
void 0;
x=void 0;Benutzerdefinierte Funktionsaufrufe verwerfen
Modus: --drop=<name>
Entfernt Aufrufe von angegebenen globalen Funktionen oder Methoden.
assert(condition);
obj.assert(test);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:
bun build ./index.ts --minify --keep-names --outfile=out.jsOder in der JavaScript-API:
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:
const myVariable = 42;
const myFunction = () => {
const isValid = true;
const result = undefined;
return isValid ? myVariable : result;
};
const output = myFunction();// 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-namesfü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