¿Cómo obtener resultados minificados con browserify?

90

Acabo de comenzar a usar browserify , pero no puedo encontrar documentación sobre cómo hacer que se derrame una salida minificada.

Entonces me veo algo como:

$> browserify main.js > bundle.js --minified
Fdr
fuente
9
La minificación está fuera del alcance de browserify, deberá ejecutar su salida a través de un minificador.
generalhenry

Respuestas:

126

Canalícelo a través de uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puedes instalarlo usando npm así:

 npm install -g uglify-js
topek
fuente
3
¿Cómo hacer esto con grunt browserify / watchify task?
Greg Ennis
1
Si usa gruñido, recomendaría hacerlo en dos pasos. Primero compila con browserify y luego minifica. La ventaja es que puede tener una compilación de desarrollo con mapas de origen y una compilación de producción que lo elimina todo.
Topek
Sí, eso es lo que terminé haciendo. En realidad son 3 pasos, tienes que limpiar el archivo intermedio. ¡Gracias!
Greg Ennis
8
y ¿qué pasa si quiero un mapa fuente para mis archivos feos - que apuntará al código antes de la "navegación"?
Thomas Deutsch
3
@ThomasDeutsch Hice un complemento para eso .
Ben
21

A partir de 3.38.x, puede usar mi complemento minifyify para minimizar su paquete y aún tener mapas de origen utilizables. Esto no es posible con las otras soluciones; lo mejor que puede hacer es volver a mapear el paquete sin comprimir. Minimice los mapas hasta sus archivos fuente separados (sí, ¡incluso a coffeescript!)

Ben
fuente
1
Dice que admite hasta la versión 9 de browserify. Browserify está actualmente en 11.0.1. ¿Apoyará esto?
cchamberlain
uglifyify parece funcionar para mí como un buen reemplazo
Brett Zamir
15

O use la transformación uglifyify que "le brinda el beneficio de aplicar la transformación" squeeze "de Uglify antes de que sea procesada por Browserify, lo que significa que puede eliminar las rutas de código inactivo para requisitos condicionales".

srgstm
fuente
Todavía requiere el uso de la tubería uglify que se muestra en la respuesta superior. Lo dicen allí mismo, al comienzo de su documento.
carlin.scott
11

Después de pasar unas horas investigando cómo construir nuevos procesos de construcción, pensé que otros podrían beneficiarse de lo que terminé haciendo. Estoy respondiendo a esta vieja pregunta porque parece alta en Google.

Mi caso de uso es un poco más complicado de lo que pidió OP. Tengo tres escenarios de construcción: desarrollo, pruebas, producción. Como la mayoría de los desarrolladores profesionales tendrán los mismos requisitos, creo que es excusable ir más allá del alcance de la pregunta original.

En desarrollo , uso watchify para crear un paquete sin comprimir con el mapa fuente cada vez que cambia un archivo JavaScript. No quiero el paso uglify ya que quiero que la compilación termine antes de que haya pulsado la pestaña Alt en el navegador para presionar la actualización y de todos modos no es de ningún beneficio durante el desarrollo. Para lograr esto utilizo:

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

Para las pruebas , quiero exactamente el mismo código que el de producción (por ejemplo, uglified) pero también quiero un mapa fuente. Lo logro con:

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

Para la producción , el código se comprime con uglify y no hay un mapa fuente.

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

Notas:

He usado estas instrucciones en Windows 7, MacOS High Sierra y Ubuntu 16.04.

Dejé de usar minifyify porque ya no se mantiene.

Quizás haya mejores formas que las que estoy compartiendo. He leído que aparentemente es posible obtener una compresión superior uglificando todos los archivos de origen antes de combinarlos con browserify. Si tiene más tiempo que yo para dedicarle, es posible que desee investigarlo.

Si aún no tiene watchify, uglify-js o browserify instalados, instálelos con npm así:

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

Si tiene instaladas versiones antiguas, le recomiendo que actualice. Particularmente uglify-js, ya que realizaron un cambio radical en los argumentos de la línea de comandos que invalida una gran cantidad de información que aparece en Google.

Gary Ott
fuente
4

Ya no es necesario usar complementos para minificar mientras se conserva un mapa de origen:

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

Me gusta terser que tiene soporte para ES6 + y también una buena composición.

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

Instalar globallly:

 npm i -g terser
Alvin Konda
fuente