Comment obtenir une sortie minifiée avec browserify?


90

Je viens de commencer à utiliser browserify , mais je ne trouve pas de documentation sur la façon de le faire déborder d'une sortie minifiée.

Donc je regarde quelque chose comme:

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

9
La minification est en dehors de la portée de browserify, vous devrez exécuter sa sortie via un minifier.
generalhenry

Réponses:


126

Passez-le à travers uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Vous pouvez l'installer en utilisant npm comme ceci:

 npm install -g uglify-js

3
Comment faire cela avec la tâche Grunt browserify / watchify?
Greg Ennis

1
Si vous utilisez grunt, je vous recommande de le faire en deux étapes. Commencez par compiler avec browserify puis minify. L'avantage est que vous pouvez avoir une version de développement avec des cartes sources et une version de production qui supprime tout.
topek

Oui c'est ce que j'ai fini par faire. C'est en fait 3 étapes, vous devez nettoyer le fichier intermédiaire. Merci!
Greg Ennis

8
et que faire si je veux un sourcemap pour mes fichiers uglified - qui pointera vers le code avant "browserification"?
Thomas Deutsch

3
@ThomasDeutsch J'ai fait un plugin pour ça .
Ben

21

A partir de 3.38.x vous pouvez utiliser mon minifyify plugin rapetisser votre paquet et ont encore sourcemaps utilisables. Ce n'est pas possible avec les autres solutions - le mieux que vous puissiez faire est de revenir au bundle non compressé. Minifyify maps jusqu'à vos fichiers source séparés (oui, même à coffeescript!)


1
Il dit qu'il prend en charge jusqu'à la version 9 de browserify. Browserify est actuellement à 11.0.1. Soutiendra-t-il cela?
cchamberlain

uglifyify semble fonctionner pour moi comme un bon remplacement
Brett Zamir

15

Ou utilisez la transformation uglifyify qui "vous donne l'avantage d'appliquer la transformation" squeeze "d'Uglify avant qu'elle ne soit traitée par Browserify, ce qui signifie que vous pouvez supprimer les chemins de code morts pour les exigences conditionnelles."


Cela nécessite toujours d'utiliser le tube uglify indiqué dans la réponse du haut. Ils le disent au début de leur doc.
carlin.scott

11

Après avoir passé quelques heures à étudier comment construire de nouveaux processus de construction, j'ai pensé que d'autres pourraient bénéficier de ce que j'ai fini par faire. Je réponds à cette vieille question car elle apparaît haut dans Google.

Mon cas d'utilisation est un peu plus complexe que celui demandé par OP. J'ai trois scénarios de construction: développement, test, production. Comme la plupart des développeurs professionnels auront les mêmes exigences, je pense qu'il est excusable d'aller au-delà de la portée de la question initiale.

En développement , j'utilise watchify pour créer un bundle non compressé avec une carte source chaque fois qu'un fichier JavaScript change. Je ne veux pas que l'étape uglify car je veux que la construction se termine avant que j'ai alt-tabed dans le navigateur pour appuyer sur Actualiser et cela n'a aucun avantage pendant le développement de toute façon. Pour y parvenir, j'utilise:

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

Pour les tests , je veux exactement le même code que la production (par exemple uglifié) mais je veux aussi une carte source. J'y parviens avec:

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

Pour la production , le code est compressé avec uglify et il n'y a pas de carte source.

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

Remarques:

J'ai utilisé ces instructions sur Windows 7, MacOS High Sierra et Ubuntu 16.04.

J'ai arrêté d'utiliser minifyify car il n'est plus maintenu.

Il y a peut-être de meilleures façons que ce que je partage. J'ai lu qu'il est apparemment possible d'obtenir une compression supérieure en modifiant tous les fichiers sources avant de les combiner avec browserify. Si vous avez plus de temps à y consacrer que moi, vous voudrez peut-être enquêter là-dessus.

Si vous n'avez pas encore installé watchify, uglify-js ou browserify, installez-les avec npm ainsi:

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

Si vous avez d'anciennes versions installées, je vous recommande de mettre à niveau. Surtout uglify-js car ils ont apporté une modification radicale aux arguments de ligne de commande qui invalide de nombreuses informations qui apparaissent dans Google.


4

Plus besoin d'utiliser des plugins pour minifier tout en préservant une carte source:

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

1

J'aime terser qui prend en charge ES6 + et une bonne comporession aussi.

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

Installez globalement:

 npm i -g terser
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.