Come ottenere un output minimizzato con browserify?


90

Ho appena iniziato a usare browserify , ma non riesco a trovare la documentazione su come ottenerlo fuoriuscire dall'output minimizzato.

Quindi sto cercando qualcosa del tipo:

$> browserify main.js > bundle.js --minified

9
La minimizzazione è al di fuori dell'ambito di browserify, dovrai eseguire il suo output tramite un minificatore.
generalhenry

Risposte:


126

Conducilo attraverso uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puoi installarlo usando npm in questo modo:

 npm install -g uglify-js

3
Come farlo con l'attività browserify / watchify grugnito?
Greg Ennis

1
Se usi grunt ti consiglio di farlo in due passaggi. Prima compila con browserify e poi minimizza. Il vantaggio è che puoi avere una build di sviluppo con mappe di origine e una build di produzione che rimuove tutto.
topek

Sì, questo è quello che ho finito per fare. In realtà sono 3 passaggi, devi ripulire il file intermedio. Grazie!
Greg Ennis

8
e cosa succede se voglio una mappa sorgente per i miei file modificati - che punterà al codice prima della "browserification"?
Thomas Deutsch

3
@ThomasDeutsch Ho creato un plugin per questo .
Ben

21

A partire da 3.38.x puoi usare il mio plugin minifyify per minimizzare il tuo bundle e avere ancora mappe dei sorgenti utilizzabili. Questo non è possibile con le altre soluzioni: il meglio che puoi fare è mappare di nuovo al bundle non compresso. Minimizza le mappe fino ai tuoi file sorgente separati (sì, anche a coffeescript!)


1
Dice che supporta fino alla versione 9 di browserify. Browserify è attualmente alla 11.0.1. Lo supporterà?
cchamberlain

uglifyify sembra funzionare per me come un buon sostituto
Brett Zamir il

15

Oppure usa la trasformazione uglifyify che "ti dà il vantaggio di applicare la trasformazione" squeeze "di Uglify prima che venga elaborata da Browserify, il che significa che puoi rimuovere i percorsi di codice inattivi per i requisiti condizionali."


È comunque necessario utilizzare il tubo uglify mostrato nella risposta in alto. Lo dicono proprio lì all'inizio del loro doc.
carlin.scott

11

Dopo aver trascorso alcune ore a studiare come costruire nuovi processi di build, ho pensato che altri potessero trarre vantaggio da ciò che ho finito per fare. Sto rispondendo a questa vecchia domanda in quanto appare in alto su Google.

Il mio caso d'uso è un po 'più complicato di quanto richiesto da OP. Ho tre scenari di build: sviluppo, test, produzione. Poiché la maggior parte degli sviluppatori professionisti avrà gli stessi requisiti, penso che sia scusabile andare oltre lo scopo della domanda originale.

In fase di sviluppo , utilizzo watchify per creare un bundle non compresso con la mappa sorgente ogni volta che cambia un file JavaScript. Non voglio il passaggio brutto poiché voglio che la compilazione finisca prima di aver premuto il tasto Alt per il browser per aggiornare e comunque non è di alcun vantaggio durante lo sviluppo. Per ottenere ciò utilizzo:

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

Per il test , voglio lo stesso identico codice della produzione (ad esempio, uglified) ma voglio anche una mappa sorgente. Ottengo questo con:

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

Per la produzione , il codice viene compresso con uglify e non esiste una mappa sorgente.

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

Appunti:

Ho usato queste istruzioni su Windows 7, MacOS High Sierra e Ubuntu 16.04.

Ho smesso di usare minifyify perché non è più mantenuto.

Forse ci sono modi migliori di quello che sto condividendo. Ho letto che a quanto pare è possibile ottenere una compressione superiore semplificando tutti i file sorgente prima di combinarli con browserify. Se hai più tempo da dedicare a quello che ho io, potresti indagare su questo.

Se non hai già installato watchify, uglify-js o browserify, installali con npm così:

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

Se hai vecchie versioni installate ti consiglio di aggiornare. Particolarmente uglify-js in quanto hanno apportato una modifica sostanziale agli argomenti della riga di comando che invalida molte informazioni che vengono fuori in Google.


4

Non è più necessario utilizzare plug-in per minimizzare preservando una mappa di origine:

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

1

Mi piace terser che ha il supporto per ES6 + e anche qualche buona comporession.

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

Installa globalmente:

 npm i -g terser
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.