JavaScript ライブラリを最小化および圧縮するために何を使用していますか?
17 に答える
私は長い間YUI Compressorを使用してきましたが、問題はありませんでしたが、最近Google Closure Compilerを使い始めて、ある程度の成功を収めました。これまでの私の印象:
- ファイルサイズの削減という点では、一般的に YUI Compressor よりも優れています。シンプルモードでは少しずつ、アドバンスモードではたくさん。
- Simple モードは、これまでのところ YUI Compressor と同じくらい信頼できます。私が与えたものは何も問題を示していません。
- 高度な「コンパイル」モードは、一部のスクリプトには最適ですが、スクリプトのサイズを大幅に縮小するには、コードを壊す可能性が十分にあるコードに手を加える必要があります。これらの問題のいくつかに対処する方法があり、それが何をしているのかを理解することは、問題を回避するのに大いに役立ちますが、私は通常、このモードの使用を避けます.
私は単純な「コンパイル」モードで Google Closure Compiler を使用することに移行しました。これは、一般的に YUI Compressor よりもわずかに優れているためです。YUI Compressor よりもかなり使用頻度が低いですが、これまで見てきたことから、YUI Compressor をお勧めします。
私がまだ試していないが有望に思えるもう 1 つの方法は、Mihai Bazon の UglifyJSです。
YUI Compressorを使用しています。仕事が捗りそうです!
ここには多くの可能性があります:
- 他の回答で言及されているYUIコンプレッサー、
- Google クロージャコンパイラ、
- ビルドシステムで使用されるDojo ToolKitのShrinkSafe コンパイラ、
- Douglas Crockfordのまだ実際のJSMin、
- 他の人が言及したUgliifyJS 、
- 商用ソリューションであるjavaScript Obfuscator (個人的には使用されていません)
私の個人的な経験から、Dojo SDK を使用してカスタム ビルドを構築することをお勧めします。これにより、通常の ShrinkSafe コンパイラ、または現在サポートされているGoogle Closure のいずれかを使用するように構成できます。
圧縮に関しては、これまでのところ Google Closure が最良の結果をもたらしていると思いますが、通常は ShrinkSafe に満足しています。これは少し古く、より堅牢ですが、Closure Compiler はブロック上で少し新しい子供のように見えます。 (たとえば、利害関係者はあまり好きではないかもしれません)。
ただし、YUI Compressor だけを信頼する人もいます。私は個人的にそれを本当に保証することはできません。
独自の JavaScript コードだけでなく、ライブラリを圧縮することを疑問視している場合、これらのツールのほとんどで、名前を変更したり削除したりしてはならないシンボルをエクスポートする必要があるため、明らかに複雑になります。ほとんどのまともなコンプレッサーは、使用されていないと思われる関数を削除します-明らかにプロジェクトにバインドされていない場合、ライブラリの場合がよくあります-名前を変更して短くし、使用する文字を減らします-明らかにパブリックが必要なため、これも問題です改ざんできない API。
このトピックに関する他のスレッドも見つけることができ、ツールのサポート ドキュメントで情報を見つけることができます。ExtJS (YUI コンプレッサーを使用) 用の Dojo の Build ツール (つまり、ShrinkSafe または Closure Compiler を使用) へのある種のペンダントであるJSBuilder2も参照してください。
(申し訳ありませんが、新しい SO ユーザーなので、複数のリンクを追加することはできないため、ツールに直接リンクすることはできません。)
編集:いくつかの回答で表明された懸念については、圧縮によってバグが発生する可能性があり、コードが破損しないためデバッグが容易になるということです:はい、それは有効な懸念です。でも:
- ミニファイヤを使用すると、gzip 圧縮が有効になっている場合でも、帯域幅の点で非常に大幅な改善が得られます (また、圧縮機の寿命を延ばすことで、gzip 圧縮を活用する方法を学ぶことができます)。
- 動作が同一であることを確認するために、デバッグ モードとプロダクション モードでコードを試す必要があります。つまり、それもあなたの仕事の一部です...
- これらのコンプレッサーの中には、しばらく前から存在しているものもあり、実際にはコードにバグを導入することはありません。彼らは本当に物事を再編成し、文字列を置き換えているだけです。
- 一部の圧縮プログラム (たとえば、dojo ビルド システム) には、圧縮された出力と圧縮されていない出力の両方を生成できるオプションが付属しているため、たとえばクエリ パラメーターを使用して、デバッグ用と生成用に異なるモードを有効にすることができます。
私は JavaScript をまったく最小化していません。gzip 圧縮で十分ですし、エラー メッセージが引き続き役立つという追加の利点もあります。
私もYUICompressorを使用しています。私は自分のプロジェクトで使用するこのようなアリのタスクを持っています:
<!--
YUI Compressor tasks
http://www.julienlecomte.net/yuicompressor/README
-->
<property name="yuicompressor.jar"
value="C:/devlibs/yuicompressor-2.2.4/build/yuicompressor-2.2.4.jar"/>
<target name="js.compress">
<!-- Create min directory under js direcrtory if it doesnt exist -->
<mkdir dir="${js-directory}/min" />
<apply verbose="true" executable="java" parallel="false" failonerror="true">
<fileset dir="${js-directory}" includes="*.js"/>
<arg line="-jar"/>
<arg path="${yuicompressor.jar}"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.js" to="${js-directory}/min/*-min.js"/>
<targetfile/>
</apply>
</target>
UglifyJSは新しいものです。
UglifyJSは、YUI Compressorよりも圧縮率が高く、GoogleClosureCompilerとほぼ同等です。たとえば、Google ClosureCompilerのjQueryの圧縮バージョンはUglifyJSによって生成されたバージョンよりもわずか403バイト小さいです-印象的です!UglifyJSは、ロングショットで実行するのも最速で、Closureを6秒以上上回っています。
さらに、UglifyJSによって生成されたコードは、Closureが生成したコードよりも安全です。たとえば、Closureはevalまたは{}の処理方法を知りません。エラーをログに記録し、とにかく変数の名前を変更し続けます。これは明らかに、壊れたコードにつながります。UglifyJSにはこの問題はありません。
詳細については、http: //badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-jsをご覧ください。
Google の閉鎖ツール
アドオンを使用して Firebug でデバッグするために、縮小版を通常のソース コードにマップできます。
以前にYUIコンプレッサーを試しましたが、エラーメッセージが表示されます。
JSMINを使用してJavaScriptを縮小することをお勧めします。
これは、プロジェクトをビルドするときにファイルを自動的に縮小するために Visual Studio に統合できる Microsoft のソリューションです。
インストールするには:
から msi をダウンロードします: http://aspnet.codeplex.com/releases/view/40584
完了後にコンピュータを再起動する必要がある場合があります。
使用するには:
.csproj ファイルを編集し、ファイルの末尾 (</Project>
タグの前)に次を含めます。
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin
JsSourceFiles="@(JS)"
JsSourceExtensionPattern="\.js$"
JsTargetExtension=".min.js"
CssSourceFiles="@(CSS)"
CssSourceExtensionPattern="\.css$"
CssTargetExtension=".min.css"/>
</Target>
プロジェクトをビルドすると、.min.js、.min.css で終わらないすべての CSS および js ファイルが縮小されます (他のファイルを縮小から除外するには、「除外」属性を参照してください)。
http://code.google.com/p/jsmin-php/
古き良き Doug Crockford :-) これの美しさは、キャッシュ制御を使用すると、必要な場合にのみ、自動化された圧縮を取得できることです。または、私のプロジェクトの 1 つで、圧縮/gzip されたファイルを出力し、変更を加えたときにそれらを削除します。開発環境では、縮小スクリプトを呼び出しません。
JavaScript :: Minifier :: XSの周りに単純な(3〜4行の)ラッパースクリプトを使用します。
ビルド中にファイルを最小化するために YUI Compressor を使用する方法を説明した記事を次に示します:ビルド プロセスの一部として JS ファイルを圧縮する
私は perl の JavaScript::Minifier を使用しています。これはかなりうまく機能し、たとえば perl を使用していくつかのフレーズを置き換えることができます。
http://caja.appspot.com/tools/indexは、HTML/CSS/JS の 3 つすべてを処理します。
https://jawr.dev.java.net/は縮小とバージョン管理に優れています