browserifyで縮小された出力を取得するにはどうすればよいですか?


90

browserifyを使い始めたばかり、縮小された出力を流出させる方法についてのドキュメントが見つかりません。

だから私は次のようなものを探しています:

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

9
ミニファイはbrowserifyの範囲外であり、その出力をミニファイアを介して実行する必要があります。
generalhenry 2013年

回答:


126

uglifyjsにパイプします。

 browserify main.js | uglifyjs > bundle.js

次のようにnpmを使用してインストールできます。

 npm install -g uglify-js

3
grunt browserify / watchifyタスクでこれを行う方法は?
グレッグエニス

1
gruntを使用する場合は、2つのステップで行うことをお勧めします。最初にbrowserifyでコンパイルし、次に縮小します。利点は、ソースマップを使用した開発ビルドと、すべてを削除する本番ビルドを使用できることです。
topek 2013

はい、それが私がやったことです。実際には3つのステップで、中間ファイルをクリーンアップする必要があります。ありがとう!
グレッグエニス

8
醜いファイルのソースマップが必要な場合はどうなりますか?「ブラウザ化」の前のコードを指しますか?
Thomas Deutsch


21

3.38.x以降、私のminifyifyプラグインを使用してバンドルを縮小し、引き続き使用可能なソースマップを使用できます。これは他のソリューションでは不可能です。できる最善の方法は、非圧縮バンドルにマップして戻すことです。Minifyifyは、マップを個別のソースファイルにまでさかのぼります(はい、coffeescriptにも!)


1
browserifyバージョン9までをサポートすると書かれています。Browserifyは現在11.0.1です。これをサポートしますか?
cchamberlain 2015

uglifyifyは私にとって良い代替品として機能しているようです
Brett

15

または、「Browserifyによって処理される前にUglifyの「スクイーズ」変換を適用する利点を提供するuglifyify変換を使用します。つまり、条件付き要求のデッドコードパスを削除できます」。


それでも、一番上の答えに示されている醜いパイプを使用する必要があります。彼らは彼らのドキュメントの冒頭でそう言っています。
carlin.scott 2016年

11

新しいビルドプロセスを構築する方法を調査するために数時間を費やした後、私は他の人が私がやったことから利益を得るかもしれないと思いました。この古い質問はGoogleで高く表示されているので、私は答えています。

私のユースケースは、OPが要求したよりも少し複雑です。開発、テスト、本番の3つのビルドシナリオがあります。ほとんどのプロの開発者は同じ要件を持っているので、元の質問の範囲を超えることは許されると思います。

開発では、JavaScriptファイルが変更されるたびに、watchifyを使用してソースマップを含む非圧縮バンドルを構築します。ブラウザーにAltキーを押して更新を押す前にビルドを終了させたいので、醜いステップは必要ありません。とにかく開発中は何のメリットもありません。これを達成するために私は使用します:

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

テストには、本番環境とまったく同じコード(例:醜い)が必要ですが、ソースマップも必要です。私はこれを次のように達成します:

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

本番環境では、コードはuglifyで圧縮されており、ソースマップはありません。

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

ノート:

これらの手順は、Windows 7、MacOS High Sierra、Ubuntu16.04で使用しました。

minifyifyが維持されなくなったため、使用を停止しました。

私が共有しているものよりも良い方法があるかもしれません。browserifyと組み合わせる前に、すべてのソースファイルを醜くすることで、優れた圧縮を実現できるようです。私よりも多くの時間を費やしている場合は、調査することをお勧めします。

watchify、uglify-js、またはbrowserifyがまだインストールされていない場合は、npmを使用して次のようにインストールします。

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

古いバージョンがインストールされている場合は、アップグレードすることをお勧めします。特にuglify-jsは、コマンドライン引数に重大な変更を加えたため、Googleに表示される多くの情報が無効になります。


4

ソースマップを保持しながら縮小するためにプラグインを使用する必要はもうありません。

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

1

私のようなterser ES6 +と同様にいくつかの良いcomporessionをサポートしています。

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

グローバルにインストールします。

 npm i -g terser
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.