2

現在、 B2B 環境のローカル ネットワーク上で実行されるアプリケーションを開発しています。したがって、ハードウェアは安く、プログラマーは高価なので、帯域幅を節約するという点でのマイクロ(ミニ?)最適化についてはほとんど忘れることができます。

プロジェクトには適切に構造化されたオブジェクト指向の js コードがあり、明らかに多くの js クラスがあります。すべてのクラスが別々のファイルに保存される場合、このコードをナビゲートして維持するのは非常に簡単です。

しかし、これにより、ブラウザーが数十のHTTP 要求を生成して、ページで必要なすべての js ファイル/クラスを取得するようになります。ローカル環境でも、最初のロード (キャッシュが空の場合) では超高速ではなく、後で変更してキャッシュを無効にする必要があります。

可能な解決策：

しかし、これに YUI コンプレッサーを選択した場合 (開発環境では縮小アクションなし、本番環境では縮小)、任意の js ファイルを変更するたびに、この大きな js ファイルをリロード/再コンパイルする必要があります。

この問題を解決するために何をお勧めしますか?

4

3 に答える 3

7

すべての .js ファイルを別々に保管してください。「ファイルごとに 1 つのクラス」という規則を守ります。

次に、サーバー側のテクノロジを使用して、スクリプトを 1 つの要求に集約します。

オプション:

  1. すべての JS を 1 つの要求に集約するには、ASPX や PHP など、サーバー側のスクリプトを使用します。.js のリクエストは静的ファイルではなくなりましたが、サーバーでのキャッシュにより、比較的安価に処理できるはずです。

  2. 統合された .js ファイルでサーバー サイド インクルードを使用します。

    <!--#include virtual="/class1.js"-->
    <!--#include virtual="/class2.js"-->

于 2009-11-06T17:10:04.697 に答える
3

クラスごとに個別のファイルを用意するというあなたのアプローチは良いものです。開発を容易にするプラクティスは常に良いものです。

読み込みを高速化するためのヒントを次に示します。

  • コードを圧縮します。あなたが言うように、YUICompressor、または新しくリリースされたGoogle Closure Compilerを使用できます。
  • 複数のファイルを 1 つに連結するときは、いつ、何を必要とするかを考えてください。アプリの起動時にファイル A、B、C のみが必要で、Z と X は必要ない場合は、A、B、C のみを 1 つのファイルに入れます。A/B/C の後に Z と X で別のファイルを同時にロードします。
  • Firefox プラグインYSlowとPage Speedを使用して、ロード パフォーマンスのボトルネックをテストできます。

あなたが言及したように、変更を加えるたびにコンプレッサーを再実行する必要があります。これは大きな問題ではないと思います。まともなマシンでは、多くのファイルがあってもかなり高速に実行されるはずです。または、何らかのツールを使用して毎日のビルド プロセスを使用し、ソース管理から最新のリビジョンをビルドし (scm を使用しますよね?)、単体テストを実行して、すべてが問題なければデプロイすることもできます。

Antまたはその他の自動化ツールを使用してビルド スクリプトを作成することをお勧めします。これにより、1 つのコマンドを実行して圧縮スクリプトをビルドするのと同じくらい簡単になり、他の方法で行う必要がある反復作業を減らすことができます。Ant でコードをサーバーにデプロイすることもできます。

于 2009-11-06T17:17:32.290 に答える
1

両方の長所があるかもしれません-反復ごとにコンパイル/デプロイする必要のないjsファイルごとに1つのクラスと、本番環境で1つ（または複数）の連結されたより大きなjsファイル（必要に応じて縮小）を備えた開発環境。

ビルド環境に応じて、これはさまざまな方法でセットアップできますが、Antを使用するのが最も簡単な方法です。Antを使用すると、連結と縮小の両方のタスクを実行できます（ Javaタスクを介してYUICompressorを実行します）。これにより、連結および縮小された大きなjsファイルが生成されます。

ただし、生産性を維持するには、コードの反復ごとにこれを行わないようにする必要があります。タグを1つから複数に（クラスファイルごとに）変更することは問題外です。

したがって、期待どおりに大きなjsファイルをロードします。

<script src="application.js"></script>

本番環境にデプロイする場合、このファイルはすべてのjsファイルの連結/縮小バージョンです。

ただし、開発中、このファイルはブートストラップ/ローダーファイルであり、個々のjsファイルをすべてロードするだけです（jQueryを使用した例示的な例）。

$.getScript('/class1.js');
$.getScript('/class2.js');
$.getScript('/class3.js');
$.getScript('/class4.js');
$.getScript('/classn.js');
....

YUI 3を使用している場合は、モジュールの動作と依存関係を指定する方法を調べてください。

異なるAntターゲットを使用すると、これらのファイルの生成と正しい場所へのコピーを簡単に管理できます。

これで、ファイルの変更をテストする必要があるときはいつでもブラウザをリロードできますが、本番環境ではパフォーマンスが向上します。生産性や保守性を犠牲にすることなくすべて。

于 2009-11-06T22:06:33.220 に答える