E パフォーマンスのためのADF JavaScriptパーティション化の使用

この付録では、「WebCenter Portal」ページでJavaScriptを使用する際に最適なパフォーマンスを得る方法を説明します。

この付録の内容は次のとおりです。

第E.1項「JavaScriptのパーティション化の使用」
第E.2項「パフォーマンスのパーティション化の使用」

E.1 JavaScriptのパーティション化の使用

ADF UIコンポーネントは複雑なエンティティであり、それぞれに1つ以上のHTML、CSSおよびJavaScript (JS)要素が含まれています。コンポーネントがレンダリングされると、HTMLタグは適切なCSSスタイル・クラスが添付された状態でページにスタンプされます。ADFでは、ページにレンダリングされたコンポーネントに属するJSファイルのみをダウンロードすることができます。ただし、個々のJSファイルがダウンロードされる場合、ページごとに大量のネットワーク・トラフィックが発生するため、ページのパフォーマンスが遅くなります。これに対する解決策は、JavaScriptのパーティションを使用することです。ADFのJavaScriptパーティション化機能では、ADFコンポーネントからの個々のJSファイルをバケット内に集約し、これによりダウンロードの数を減らします。デフォルトでは、動作するためにすべてのADFページにboot.jsファイルおよびcore.jsファイルが必要です。さらに、JSファイルはパーティションとしてまとめてダウンロードされるか、(パーティションが定義されていない場合)各コンポーネントごとに1つずつダウンロードされます。JavaScriptパーティション化の詳細は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJavaScriptライブラリのパーティション化の使用に関する項を参照してください。

E.2 パフォーマンスのパーティション化の使用

最適なJSパフォーマンスを得るための一般的な方法は次のとおりです。

ネットワーク遅延を防ぐために、静的ファイル・ダウンロードの数を最小限に保ちます
大きすぎるファイルはページのロードを遅くするため、個々のファイル・サイズを同程度に保ちます。
後続のブラウザ・ページでのファイルのダウンロードが減らせるように、ホーム・ページを慎重に構成します。

こうした一般的な規則を考慮して、次の手順に従ってJSパーティションを最適なパフォーマンスになるようにチューニングしてください。

『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJavaScriptパーティションの作成方法に関する項で説明しているように、WEB-INFにadf-js-partitions.xmlファイルという新しいファイルを作成し、XMLを追加します。
Adf*で始まるコア・パーティションからすべての機能を削除します。

注意:
adf-js-partitions.xmlファイルをテストするたびに、アプリケーションを再デプロイし、ブラウザ・キャッシュをクリアする必要があります。
ホーム・ページをテストし、ダウンロードされたJSファイルを確認します。図E-1では、Firebugを使用して結果を示します。

図E-1 ホーム・ページのダウンロード済ファイルの初期結果

「図E-1 ホーム・ページのダウンロード済ファイルの初期結果」の説明
パーティションを作成するには、ページからダウンロードされた個々のJSファイルを調査します。Adfで始まるファイルには定義されたパーティションがありませんが、dnd-11.1.1.7のようなファイルはパーティションです。そうしたパーティションもadf-js-partitions.xml内ですべて削除(またはコメント・アウト)します。
機能名を検索するには、Firebugまたは同様のツールでJSファイルを開きます。図E-2に示すように、通常createComponentClassには機能名が含まれます。

図E-2 機能名の検索

「図E-2 機能名の検索」の説明

新規パーティション(たとえば、custom-webcenter)を作成し、例E-1に示すように、前述のテクニックを使用してすべてのダウンロード機能を新規パーティションに追加します。これは例であり、使用するパーティションはホーム・ページのコンテンツによって異なることに注意してください。

例E-1 JavaScriptパーティションのサンプル

<partition>
<partition-name>custom-webcenter</partition-name>
<feature>AdfRichDialog</feature>
<feature>AdfRichSubform</feature>
<feature>AdfRichForm</feature>
<feature>AdfRichPopup</feature>
<feature>AdfInlineEditing</feature>
<feature>AdfRichPanelSplitter</feature>
<feature>AdfPageCustomizable</feature>
<feature>AdfRichShowDetailFrame</feature>
<feature>AdfRichPanelGridLayout</feature>
<feature>AdfShowPopupBehavior</feature>
<feature>AdfRichCommandLink</feature>
<feature>AdfRichCommandButton</feature>
<feature>AdfRichDocument</feature>
<feature>AdfRichPanelWindow</feature>
<feature>AdfDragAndDrop</feature>
<feature>AdfRichPanelCustomizable</feature>
<feature>AdfDialogServicePopupContainer</feature>
</partition>

注意:

AdfUIEditableValueとAdfRichOutputLabelとの間には依存性があり、そのため、ページ上で出力ラベルが使用されていない場合でもAdfRichOutputLabelがコア・パーティション内に含まれている必要があります。含まれていない場合、次のエラーが発生します。

<FeatureUtils> <_resolveFeatures> 機能"AdfDvtCommon"のfeature-dependencyを無視します。このような機能は存在しません。.

既存のパーティションからカスタムに追加した機能を削除し、アプリケーションを再実行してダウンロードの数および(さらに重要な)レンダリングの時間の違いを確認します。

図E-3 パーティション化後のホーム・ページのダウンロード済ファイルの結果

「図E-3 パーティション化後のホーム・ページのダウンロード済ファイルの結果」の説明
その他の複雑なページでプロセスを繰り返します。ホーム・ページでほとんどのJSファイルをダウンロードしてしまっているため、ブラウザによってキャッシュされており、ここではパーティション化するための機能が格段に減ります。