Clever Geek Handbook

Javascriptの圧縮と結合の問題

JavaScirpt ファイルの圧縮と結合のトピックに関する多くのメモの公開後、この圧縮とマージの最も特徴的な問題を明らかにすることは価値があります 。



簡単なものから始めましょう：JS圧縮がどのように気分を損なうか。 そして、それを元に戻す方法:)



UPD はWebサイトアクセラレーションコンテストを開始しました 。 賞品：モニター、ウェブカメラ、マウス。 すべてが超高速です。



Javascript圧縮



一般に、JavaScriptファイルの圧縮により、通常のgzipに比べてサイズが5〜7％しか削減されないことをすぐに言及する価値があります。とnginx （またはLightSpeed）の構成ですが、トピックに戻ります：JavaScriptファイルを最小化したいのですが、これを行う最善の方法は何ですか？



2年前、 現在のツールのレビューが行われましたが、その間、状況はあまり変わりませんでした（ Googleコンパイラが登場しない限り）。 しかし、すべて順番に。





概要はこちらです。JavaScriptが開発されたサーバー上だけでなく、最適化後もJavaScriptを確認してください。 すべてのベスト-同じ単体テストを使用します。 説明したツールについて多くを学びます:)これが重要でない場合は、gzip（最大圧縮で最高の静的）を使用してJavaScriptを提供します。



Javascriptアソシエーションの問題



JavaScriptファイルの圧縮を理解した後、それらを結合するトピックに触れるとよいでしょう。 平均的なサイトには、5〜10個のJavaScriptファイルと、何らかの形でプラグインライブラリを呼び出すことができるコードのインラインスニペットがあります。 その結果、10〜15個のコードを組み合わせることができます（これの利点は、ユーザー側のダウンロード速度からDDoSの下でのサーバーフェールオーバーまで、海であり、ここでは各接続が静的であってもカウントされます）。



しかし、ラムに戻ります。 ここで、「サードパーティ」スクリプトを組み合わせる自動化について説明します。 それらへの完全なアクセス権を持っている（そしてWeb開発を理解している）場合、問題を修正する（または組合からいくつかの問題スクリプトを除外する）ことはたいしたことではありません。 それ以外の場合（スクリプトのセットが何らかの方法でエラーなしでマージされることを望まない場合）、次のアプローチはあなたのためだけです。



そのため、10〜15個のコードがあります（それらの一部は埋め込みコードの形式で、一部は外部ライブラリの形式であり、これらを一緒に「マージ」することもできます）。 それらの独立したパフォーマンスを保証する必要があります。 何で構成されていますか？



ファイルにJavaScriptエラーがある場合、ブラウザーはエラーでこのファイルの実行を停止します（最も古いものの一部は、この場合、ページ上のすべてのJavaScriptファイルの実行も停止しますが、これについてはまったく話していません）。 したがって、共通ファイルにマージする最初のライブラリでエラーが発生した場合、すべてのブラウザーで、マージ後にクライアントロジックがバラバラになります。 悲しい



さらに、インラインコードのデバッグは非常に難しいことに注意してください。 （たとえば、コードの前後にマージされたファイルを呼び出すことにより）マージから除外するか、使用する場合はファイルのマージを完全にキャンセルできます。



下位互換性



それについて何ができますか？ 最も簡単な方法：問題のあるファイル（この場合、エラーは結合の段階でのみ発生する可能性があり、別のファイルはバングで解決できます）を結合のロジックから除外します。 これを行うには、エラーが発生している場所を追跡し、そのようなケースごとに結合する構成を収集する必要があります。



しかし、もう少し簡単にできます。 JavaScriptの場合、 try-catch



コンストラクトを使用できます。 ええ、あなたはアイデアをキャッチしましたか？ まだ？ try {}



でマージするファイルのコンテンツ全体を囲み、 catch(e) {}



次の方法で外部ファイルの接続を呼び出します。 

  {
	 ... JavaScriptライブラリの内容...
 } catch（e）{
	 document.write（「元のJavaScriptファイル呼び出し」）;
 //またはconsole.log（「ユニオンからJavaScriptファイルを除外する」）;
 }


同時に、問題がない場合、ユーザーには1つのファイルのみがロードされます。 エラーが発生した場合、すべての外部の問題のあるファイルは同じ順序で接続されます。 これにより、下位互換性が提供されます。



パフォーマンスの問題



明らかに、このアプローチは「最も正しい」ものではありません。 JavaScriptエラーを特定し、それらを除去し、すべてのユーザーに単一のファイルをアップロードするのが最も論理的です。 しかし、これは常に可能とは限りません。 また、 try-catch



設計はブラウザでの実行に対して重いこと（初期化時間に10〜25％を追加）を考慮する必要があります。注意してください。



しかし、記述されたアプローチは、JavaScriptファイルを具体的に組み合わせてデバッグするために素晴らしく使用できます。結局、どのファイルが「ストリーミング」されているかを正確に判断できます（数十個のファイルがある場合、これは非常に便利です）。



短い要約



JavaScriptファイルをさらに最小化した後、必ず機能を確認してください。 また、JavaScriptファイルの結合の正確性のデバッグは簡単に自動化でき、特定のスクリプトをデバッグできない場合は下位互換性を設定することもできます。


More articles:


All Articles