Bagaimana cara mendapatkan hasil yang diperkecil dengan browserify?

90

Baru saja mulai menggunakan browserify , tetapi saya tidak dapat menemukan dokumentasi tentang cara membuatnya menumpahkan output yang diperkecil.

Jadi saya mencari sesuatu seperti:

$> browserify main.js > bundle.js --minified
Fdr
sumber
9
Minifikasi berada di luar cakupan browserify, Anda harus menjalankan outputnya melalui minifier.
generalhenry

Jawaban:

126

Pipa itu melalui uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Anda dapat menginstalnya menggunakan npm seperti:

 npm install -g uglify-js
topek
sumber
3
Bagaimana melakukan ini dengan tugas browserify / watchify grunt?
Greg Ennis
1
Jika Anda menggunakan grunt, saya akan merekomendasikan untuk melakukannya dalam dua langkah. Pertama, kompilasi dengan browserify dan kemudian minify. Keuntungannya adalah Anda dapat memiliki build pengembangan dengan peta sumber dan build produksi yang menghapus semuanya.
topek
Ya itulah yang akhirnya saya lakukan. Ini sebenarnya 3 langkah, Anda harus membersihkan file perantara. Terima kasih!
Greg Ennis
8
dan bagaimana jika saya menginginkan peta sumber untuk file saya yang jelek - yang akan mengarah ke kode sebelum "browserification"?
Thomas Deutsch
3
@ThomasDeutsch Saya membuat plugin untuk itu .
Ben
21

Mulai 3.38.x Anda dapat menggunakan plugin minifyify saya untuk mengecilkan bundel Anda dan masih memiliki peta sumber yang dapat digunakan. Ini tidak mungkin dilakukan dengan solusi lain - yang terbaik yang dapat Anda lakukan adalah memetakan kembali ke bundel yang tidak dikompresi. Perkecil peta sepanjang jalan kembali ke file sumber Anda yang terpisah (ya, bahkan ke coffeescript!)

Ben
sumber
1
Ia mengatakan itu mendukung hingga browserify versi 9. Browserify saat ini di 11.0.1. Akankah mendukung ini?
cchamberlain
uglifyify tampaknya bekerja untuk saya sebagai pengganti yang baik
Brett Zamir
15

Atau gunakan transformasi uglifyify yang "memberi Anda manfaat dengan menerapkan transformasi" pemerasan "Uglify sebelum diproses oleh Browserify, yang berarti Anda dapat menghapus jalur kode mati untuk kebutuhan bersyarat."

srgstm
sumber
Ini masih membutuhkan penggunaan pipa uglify yang ditunjukkan di jawaban atas. Mereka mengatakannya di awal dokumen mereka.
carlin.scott
11

Setelah menghabiskan beberapa jam menyelidiki bagaimana membangun proses pembangunan baru, saya pikir orang lain mungkin mendapat manfaat dari apa yang akhirnya saya lakukan. Saya menjawab pertanyaan lama ini karena tampaknya paling tinggi di Google.

Kasus penggunaan saya sedikit lebih terlibat daripada yang diminta OP. Saya memiliki tiga skenario pembuatan: pengembangan, pengujian, produksi. Karena sebagian besar pengembang profesional akan memiliki persyaratan yang sama, saya pikir itu bisa dimaafkan untuk melampaui cakupan pertanyaan awal.

Dalam pengembangan , saya menggunakan watchify untuk membuat bundel yang tidak terkompresi dengan peta sumber setiap kali file JavaScript berubah. Saya tidak ingin langkah uglify karena saya ingin build selesai sebelum saya beralih ke browser untuk menekan refresh dan itu tidak bermanfaat selama pengembangan. Untuk mencapai ini saya menggunakan:

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

Untuk pengujian , saya ingin kode yang sama persis dengan produksi (mis. Uglified) tetapi saya juga ingin peta sumber. Saya mencapai ini dengan:

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

Untuk produksi , kode dikompresi dengan uglify dan tidak ada peta sumber.

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

Catatan:

Saya telah menggunakan instruksi ini di Windows 7, MacOS High Sierra dan Ubuntu 16.04.

Saya telah berhenti menggunakan minifyify karena tidak lagi dipertahankan.

Mungkin ada cara yang lebih baik daripada yang saya bagikan. Saya telah membaca bahwa tampaknya mungkin untuk mendapatkan kompresi superior dengan melakukan uglifikasi semua file sumber sebelum menggabungkannya dengan browserify. Jika Anda memiliki lebih banyak waktu untuk dihabiskan daripada yang saya miliki, Anda mungkin ingin menyelidikinya.

Jika Anda belum menginstal watchify, uglify-js atau browserify, instal dengan npm sebagai berikut:

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

Jika Anda menginstal versi lama, saya sarankan Anda meningkatkan. Terutama uglify-js karena mereka membuat perubahan yang mengganggu pada argumen baris perintah yang membuat banyak informasi yang muncul di Google tidak valid.

Gary Ott
sumber
4

Tidak perlu menggunakan plugin lagi untuk mengecilkan sembari mempertahankan peta sumber:

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

Saya suka terser yang memiliki dukungan untuk ES6 + dan beberapa comporession yang bagus juga.

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

Instal secara global:

 npm i -g terser
Alvin Konda
sumber