Wie erhalte ich mit browserify eine minimierte Ausgabe?

87

Ich habe gerade angefangen, browserify zu verwenden , aber ich kann keine Dokumentation finden, wie ich es dazu bringen kann, minimierte Ausgaben zu verschütten.

Also sehe ich so aus wie:

$> browserify main.js > bundle.js --minified
Fdr
quelle
9
Die Minimierung liegt außerhalb des Bereichs von browserify. Sie müssen die Ausgabe über einen Minifier ausführen.
Generalhenry

Antworten:

125

Pipe es durch uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Sie können es mit npm wie folgt installieren:

 npm install -g uglify-js
topek
quelle
3
Wie mache ich das mit grunzen browserify / watchify Aufgabe?
Greg Ennis
1
Wenn Sie grunzen, würde ich empfehlen, dies in zwei Schritten zu tun. Zuerst mit browserify kompilieren und dann minimieren. Der Vorteil ist, dass Sie einen Entwicklungsbuild mit Quellkarten und einen Produktionsbuild haben können, der alles entfernt.
Topek
Ja, das habe ich letztendlich getan. In 3 Schritten müssen Sie die Zwischendatei bereinigen. Vielen Dank!
Greg Ennis
8
und was ist, wenn ich eine Quellenkarte für meine hässlichen Dateien möchte - die auf den Code vor "Browserifizierung" verweist?
Thomas Deutsch
3
@ ThomasDeutsch Ich habe ein Plugin dafür gemacht .
Ben
21

Ab 3.38.x können Sie mein Minifyify- Plugin verwenden, um Ihr Bundle zu minimieren und weiterhin verwendbare Quellkarten zu haben. Dies ist mit den anderen Lösungen nicht möglich. Das Beste, was Sie tun können, ist, das unkomprimierte Bundle wieder zuzuordnen. Minimieren Sie Karten bis zu Ihren separaten Quelldateien (ja, sogar bis zu Coffeescript!).

Ben
quelle
1
Es heißt, es unterstützt bis zu browserify Version 9. Browserify ist derzeit auf 11.0.1. Wird es das unterstützen?
Cchamberlain
uglifyify scheint für mich als guter Ersatz zu funktionieren
Brett Zamir
15

Oder verwenden Sie die uglifyify- Transformation, die "Ihnen den Vorteil bietet, die" Squeeze "-Transformation von Uglify anzuwenden, bevor sie von Browserify verarbeitet wird. Dies bedeutet, dass Sie tote Codepfade für bedingte Anforderungen entfernen können."

srgstm
quelle
Es ist weiterhin erforderlich, die in der oberen Antwort gezeigte uglify-Pipe zu verwenden. Sie sagen es genau dort am Anfang ihres Dokuments.
carlin.scott
11

Nachdem ich einige Stunden lang untersucht hatte, wie neue Build-Prozesse erstellt werden können, dachte ich, dass andere von dem profitieren könnten, was ich letztendlich getan habe. Ich beantworte diese alte Frage, da sie in Google hoch erscheint.

Mein Anwendungsfall ist etwas komplizierter als von OP verlangt. Ich habe drei Build-Szenarien: Entwicklung, Test, Produktion. Da die meisten professionellen Entwickler dieselben Anforderungen haben, halte ich es für entschuldbar, über den Rahmen der ursprünglichen Frage hinauszugehen.

In der Entwicklung verwende ich watchify, um ein unkomprimiertes Bundle mit Quellzuordnung zu erstellen, wenn sich eine JavaScript-Datei ändert. Ich möchte den uglify-Schritt nicht, da ich möchte, dass der Build abgeschlossen wird, bevor ich die Alt-Tab-Taste zum Browser gedrückt habe, um auf Aktualisieren zu klicken, und er ist während der Entwicklung sowieso nicht von Vorteil. Um dies zu erreichen, benutze ich:

watchify app/index.js  --debug -o app/bundle.js -v

Zum Testen möchte ich genau den gleichen Code wie die Produktion (z. B. hässlich), aber ich möchte auch eine Quellkarte. Ich erreiche dies mit:

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

Für die Produktion wird der Code mit uglify komprimiert und es gibt keine Quellkarte.

browserify app/index.js  | uglifyjs -cm > app/bundle.js

Anmerkungen:

Ich habe diese Anweisungen unter Windows 7, MacOS High Sierra und Ubuntu 16.04 verwendet.

Ich habe die Verwendung von minifyify eingestellt, da es nicht mehr gewartet wird.

Es gibt vielleicht bessere Möglichkeiten als das, was ich teile. Ich habe gelesen, dass es anscheinend möglich ist, eine überlegene Komprimierung zu erzielen, indem alle Quelldateien hässlich gemacht werden, bevor sie mit browserify kombiniert werden. Wenn Sie mehr Zeit dafür haben als ich, möchten Sie das vielleicht untersuchen.

Wenn Sie watchify, uglify-js oder browserify noch nicht installiert haben, installieren Sie sie mit npm wie folgt:

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

Wenn Sie alte Versionen installiert haben, empfehle ich Ihnen ein Upgrade. Besonders uglify-js, da sie die Befehlszeilenargumente grundlegend geändert haben, wodurch viele Informationen, die in Google angezeigt werden, ungültig werden.

Gary Ott
quelle
4

Es müssen keine Plugins mehr zum Minimieren verwendet werden, während eine Quellkarte beibehalten wird:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
Benutzer
quelle
0

Ich mag Terser, der ES6 + unterstützt und auch ein gutes Comporession.

browserify main.js | terser --compress --mangle > bundle.js

Weltweit installieren:

 npm i -g terser
Alvin Konda
quelle