Como obter uma saída minimizada com o browserify?

90

Acabei de começar a usar o browserify , mas não consigo encontrar a documentação de como fazer com que ele exiba uma saída minimizada.

Então, estou parecendo algo como:

$> browserify main.js > bundle.js --minified
Fdr
fonte
9
A minimização está fora do escopo do browserify, você precisará executar sua saída por meio de um minificador.
generalhenry

Respostas:

126

Canalize através de uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Você pode instalá-lo usando o npm da seguinte forma:

 npm install -g uglify-js
Topek
fonte
3
Como fazer isso com a tarefa grunt browserify / watchify?
Greg Ennis
1
Se você usar o grunhido, recomendo fazê-lo em duas etapas. Primeiro compile com o browserify e depois o minify. A vantagem é que você pode ter uma construção de desenvolvimento com mapas de origem e uma construção de produção que remove tudo.
topek
Sim, foi isso que acabei fazendo. Na verdade, são 3 etapas, você tem que limpar o arquivo intermediário. Obrigado!
Greg Ennis
8
e se eu quiser um mapa de origem para meus arquivos feios - que apontará para o código antes de "browserification"?
Thomas Deutsch
3
@ThomasDeutsch Fiz um plugin para isso .
Ben
21

A partir de 3.38.x, você pode usar meu plug-in minifyify para reduzir seu pacote e ainda ter mapas de origem utilizáveis. Isso não é possível com as outras soluções - o melhor que você pode fazer é mapear de volta para o pacote descompactado. Minify mapas de volta para seus arquivos de origem separados (sim, até mesmo para coffeescript!)

Ben
fonte
1
Ele diz que suporta até o browserify versão 9. Browserify está atualmente em 11.0.1. Vai apoiar isso?
cchamberlain
O uglify parece estar funcionando para mim como um bom substituto
Brett Zamir
15

Ou use a transformação uglifyify que "lhe dá o benefício de aplicar a transformação" squeeze "do Uglify antes de ser processada pelo Browserify, o que significa que você pode remover caminhos de código morto para requisitos condicionais."

srgstm
fonte
Ele ainda requer o uso do tubo uglify mostrado na resposta superior. Eles dizem isso bem no início de seu documento.
carlin.scott
11

Depois de passar algumas horas investigando como construir novos processos de construção, pensei que outras pessoas podem se beneficiar com o que acabei fazendo. Estou respondendo a esta pergunta antiga, pois ela aparece no topo do Google.

Meu caso de uso é um pouco mais complicado do que o OP pediu. Eu tenho três cenários de construção: desenvolvimento, teste, produção. Como a maioria dos desenvolvedores profissionais terá os mesmos requisitos, acho que é desculpável ir além do escopo da pergunta original.

No desenvolvimento , eu uso watchify para construir um pacote descompactado com mapa de origem sempre que um arquivo JavaScript é alterado. Eu não quero a etapa uglify, pois quero que a compilação termine antes de eu clicar com a tecla Alt para que o navegador clique em atualizar e, de qualquer forma, isso não traz nenhum benefício durante o desenvolvimento. Para conseguir isso, eu uso:

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

Para teste , quero exatamente o mesmo código de produção (por exemplo, uglified), mas também quero um mapa de origem. Eu consigo isso com:

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

Para produção , o código é compactado com uglify e não há mapa de origem.

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

Notas:

Usei essas instruções no Windows 7, MacOS High Sierra e Ubuntu 16.04.

Parei de usar o minifyify porque ele não é mais mantido.

Talvez existam maneiras melhores do que as que estou compartilhando. Eu li que, aparentemente, é possível obter compressão superior feio todos os arquivos de origem antes de combinar com o browserify. Se você tem mais tempo para dedicar a isso do que eu, pode querer investigar.

Se você ainda não tem watchify, uglify-js ou browserify instalado, instale-os com o npm desta forma:

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

Se você tiver versões antigas instaladas, eu recomendo que você atualize. Particularmente o uglify-js, pois eles fizeram uma alteração significativa nos argumentos da linha de comando, o que invalida muitas informações que aparecem no Google.

Gary Ott
fonte
4

Não há necessidade de usar plug-ins mais para minimizar enquanto preserva um mapa de origem:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
do utilizador
fonte
1

Eu gosto do terser que tem suporte para ES6 + e alguns bons comporession também.

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

Instale globalmente:

 npm i -g terser
Alvin Konda
fonte