38

私は 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. 私のアプリケーションは多くのファイルに分割されており、関数ごとに 1 つのファイルがあります。それらを特定の順序で結合し、サイトのセクションごとにファイルに縮小したいと考えています。このプロセスを自動化したい。

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

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

4

8 に答える 8

10

GoogleClosureCompilerはjQueryまたはその他のライブラリに依存しません。2種類の最適化があります-

  • 単純
  • 高度

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

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

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

私はGoogleClosureLibraryを好意的に見ていますが、現時点ではMooToolsに多額の投資をしているため、まだ使用していません。APIを見ると、DOM操作、AJAX処理、イベント処理などだけでなく、提供するものについてかなり広い範囲をカバーしているようです。

于 2010-07-10T07:40:11.983 に答える
10

$(elem)['width']()それ以外の$(elem).width()

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

于 2011-05-13T20:21:49.847 に答える
9

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

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

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

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

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

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

お役に立てれば。

于 2010-08-02T22:55:51.183 に答える
6

クロージャ コンパイラの詳細モードで jQuery を使用する

于 2012-05-20T12:43:30.073 に答える
5

jQuery は、拡張モードの Closure Compiler と (まだ) 互換性がありません。そのメソッドチェーン構文は、実行速度を大幅に向上させるための仮想化のプロトタイプに非常に容易に役立つため、互換性を持たせることは非常に良いことであることに同意します。

実際、一般的な JavaScript ライブラリー (Closure Library 以外) の中で、Closure Advanced モードと互換性があるのは Dojo Toolkit だけです。

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

于 2011-03-09T03:40:02.603 に答える
4

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

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

私は Web 上で適切なドキュメントを探し回ってきましたが、非常に少ないものしかありません。単一の 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?
于 2013-02-14T05:11:20.173 に答える
1

Tauren さん、クロージャ コンパイラホームを使用してコードをテストできます。JQuery ライブラリなどをインポートして試すことができます。可能であれば、名前の競合を回避する匿名関数を使用して JavaScript コードを定義してください。Google ライブラリの提供機能を使用して名前空間を使用します。役立つもう 1 つの優れたリソースは、Google JavaScript スタイル ガイドです。

于 2010-11-06T19:55:55.860 に答える
-1

kjscompiler: https://github.com/knyga/kjscompilerを使用して、好きなライブラリを外部として指定できます。それらは縮小されません。本当にいい解決策です。

于 2014-03-20T00:02:02.853 に答える