web-dev-qa-db-ja.com

jQueryアプリケーションを備えたGoogle Closure Compiler

私はjqueryと、それを使って構築された大きなアプリケーションに多くの時間を費やしています。最近レビューしました Google Closure Library ですが、現時点ではjqueryほどエレガントではないことがわかりました。私はそれがいくつかの可能性を秘めていると私は信じていますが、さらに調査する予定ですが、今のところ、jQueryをベースフレームワークとして引き続き使用する予定です。

しかし、私は Google Closure Compiler に非常に感銘を受けました。アプリケーションのビルドプロセス中に使用を開始したいと思います。残念ながら、標準のGoogle Closure標準に準拠していないプロジェクトでそれがどれほど簡単に使用できるかは明確ではありません。

Jqueryベースのプロジェクトの開発とGoogle Closure Compilerの使用に関するベストプラクティスまたは優れたリソースはありますか？例えば：

  1. それを使ってjqueryとjquery-uiをコンパイルすることには意味がありますか、それともGoogle CDNでこれらのリソースを引き続きポイントする必要がありますか？ライブラリのすべての機能を使用していないので、jqueryとjquery-uiは小さくなると思いますが、CDNを指すと、ファイルが既に訪問者のキャッシュにある可能性が高くなります。

  2. 私のアプリケーションは、多くのファイルに分割され、関数ごとにファイルがあります。それらを特定の順序で組み合わせ、サイトのセクションごとにファイルに縮小したいと思います。このプロセスを自動化したいのですが。

  3. 現在、私のプロジェクトにはJavaバックエンドがあり、Mavenでビルドされています。このビルドプロセスにGoogle Closure Compilerを追加しても意味がありますか？

基本的に、jQueryでGoogle Closure Compilerを使用するのに固有の優れたリソースを探しています。

jquerygoogle-closuregoogle-closure-compiler
38
Tauren

$(elem)['width']()の代わりに$(elem).width()

これはADVANCED_OPTIMIZATIONSと連動するため、クロージャーコンパイラーはjQueryメソッドをリファクタリングしません。

10
reelfernandes

Google Closure CompilerはjQueryまたはその他のライブラリにとらわれません。これには2種類の最適化があります-

  • シンプルな
  • 高度な

高度な最適化を適用しようとしましたが、アプリケーションが大幅に破損しました。同じ場合は、アプリケーションを修正するか、単純な最適化を使用できます。単純な最適化ではサイズが32％減少し、高度な最適化では約68％減少しましたが、それでもうまくいきませんでした。

自動化された方法でJS連結をビルドプロセスに移動することは間違いなく進むべき道です。 JavaScript依存関係管理 を参照してください。

jQueryはすでにバイトサイズ用に大幅に最適化されているので、Google Closure Compilerを使用して十分な量のジュースを搾り出すことができるとは思えませんが、プロジェクトと組み合わせると試してみる価値があります。

Google Closure Libraryは好ましい見方をしているが、現時点ではMooToolsに多額の投資をしているため、使用するまでには至っていない。 [〜＃〜] api [〜＃〜] を見ると、DOM操作だけでなく、何を提供する必要があるかについてかなり広範にカバーされているようですAJAX =処理、イベント処理など.

10
Anurag

1.4.2（多分以前）の時点で、jQueryはデフォルトでGoogle Closure Compilerを使用して縮小されていると思います。したがって、Google CDNを介してjQuery/jQuery UIを引き続き参照することをお勧めします。ただし、JSファイルを結合および縮小するために、Closureコンパイラーをビルドプロセスに統合することには依然として利点があります。つまり、クライアント側のページ読み込みのパフォーマンスを向上させるために、ページ読み込みあたりのJSリクエストを減らし、転送するデータを小さくしました。これらは、Closureコンパイラをビルドプロセスに統合するときに遭遇したいくつかの課題です。

  1. コンパイルコマンドの構築-ビルドプロセス中に自動化された方法で必要なすべてのパラメーターを指定してコンパイラーを呼び出す手段が必要でした。私たちにとって、これはコマンドを作成するコンソールアプリを作成することを意味しました。環境でシェルスクリプトを使用できる場合は、それが有利な場合があります。

  2. 依存関係の管理-Closureコンパイラには、依存関係が保持されるように、結合されたJSの順序を自動的にソートする機能があります。この機能を活用するには、JSファイルにgoog.provide\goog.requireの注釈を付けて、依存関係をコンパイラに通知する必要があります（ -manage_closure_dependencies ）。コンパイラーは、不要な（つまり、goog.requireステートメントで参照されていない）JSも結合されたJSから除外します。以下に注意すべき点をいくつか示します。

    • すべてのJSファイルを結合出力に含める場合は、結合スクリプトに含める各ファイルのgoog.requireステートメントのみを含む「マニフェスト」JSファイルをコンパイルに含めます（つまり、goog.provideステートメント）。
    • Closure Libraryを使用していない場合は、SIMPLE_OPTIMIZATIONS以上を使用してコンパイルしていることを確認してください。それ以外の場合、コンパイラーはgoog.provide/goog.requireステートメントを削除しません。または、独自のgoog.provide/goog.require JS関数を定義して、エラーを回避することもできます。
    • no循環依存があることを確認するか、結果に直面してください。

  3. 結合スクリプトのデバッグバージョンのコンパイル-必要に応じて、--formatting PRETTY_PRINTフラグを使用して結合スクリプトのデバッグバージョンをコンパイルできます。これにより、開発/デバッグ用に空白をそのままにフォーマットした同等のスクリプトが出力されます。

Closureコンパイラーのドキュメントは時々まばらになる場合がありますが、ほとんどの場合は開始するのに十分であり、継続的に改善されています。したがって、SO;）だけでなく、定期的に更新を確認してください

お役に立てれば。

9
HOCA

jQueryをクロージャーコンパイラー拡張モードで使用

6
Fatih Acet

jQueryは、高度なモードのClosure Compilerと（まだ）互換性がありません。メソッドチェーン構文は、仮想化のプロトタイプを簡単に作成して実行速度を大幅に向上させるため、互換性を持たせることは非常に良いことだと私は同意します。

実際、人気のあるJavaScriptライブラリー（つまり、Closure Library以外）の中で、Dojo ToolkitのみがClosure Advancedモードと互換性があります。

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

5
Stephen Chung

JQueryをクロージャーコンパイラー/アドバンスでうまく機能させることは私には困難でしたが、複数のファイルを扱っているので、ここでモジュールオプションを調べることが重要だと思います。

Closure Compilerの--moduleオプションを使用して複数の出力ファイルを作成する

私はWeb上の優れたドキュメントを探して回っていますが、VERY VERYはほとんどありません。単一のjQuery externを使用することで、複数のファイルなどを使用して、高度なファインでコンパイルできました。

@echo off
Java -jar bin\compiler.jar ^
    --compilation_level=ADVANCED_OPTIMIZATIONS ^
    --externs "externs\jquery-1.8.js" ^
    --language_in=ECMASCRIPT5_STRICT ^
    --warning_level=VERBOSE ^
    --module_output_path_prefix .\compiled\ ^
    ^
    --module_wrapper core:"(function(){%%s%%})();" ^
    --js ".\corelib.js" ^
    --module core:1 ^
    ^
    --module_wrapper somescript"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript:1:core ^
    ^
    --module_wrapper somescript1:"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript1:1:core

説明

--module_wrapper name:wrapper

これにより、スクリプトをクロージャーでラップできます。コンパイラーはデフォルトでスクリプトを削除するためです。私のように「厳密な使用」を使用している場合、それはノーノーです。

--module name:#:dependency

name       Name of the script that will get written
#          number of scripts above that line to include into this script
dependency What script does this depend on?
4
ansiart

Tauren、 closure-compiler homeを使用してコードをテストできます。 JQueryライブラリなどをインポートして試すことができます。可能であれば、名前の競合を回避する匿名関数を使用してJavaScriptコードを定義します。 Googleライブラリprovide関数を使用して名前空間を使用します。あなたを助けることができる別の良いリソースは Google JavaScript Style Guide です。

1
Arthur Ronald