– 2016/07/21(水)時点の情報に基づいています –
Ignite UI for jQuery のJSファイルのロードに時間がかかってパフォーマンスが遅い場合は・・・
Ignite UI for jQuery の機能を使用するためには
- infragistics.core.js 410KB // 基本ロジックおよびデータ ソース コンポーネント
- infragistics.dv.js 3.28 MB // チャートおよびマップ コントロール
- infragistics.lob.js 2.77 MB // グリッド、OLAP、および業務用コントロールなどの他のコントロール
のJSファイル（に加えてCSSファイルも）が必要となりますが、
| すべての機能を使う | チャート系を使う | グリッドその他を使う | |
| 必要なJSファイル | infragistics.core.js infragistics.dv.js infragistics.lob.js | infragistics.core.js infragistics.dv.js | infragistics.core.js infragistics.lob.js |
| 合計サイズ | 6.46MB | 3.69MB | 3.18MB |
ファイルサイズが大きく、ネットワークの状況によってはロードに時間がかかってしまい、画面の表示速度上のボトルネックとなることがあります。
そのような場合には、カスタムビルドを使ってパフォーマンス改善を図ることができます。
※igLoaderを使用して、必要なコントロールのJSファイルを動的に読み込むことにより
初期ロードの時間短縮を図る方法もあります。
カスタムビルドを作る
カスタムビルドとは、必要なコントロールのみをパッケージングしたビルドファイルのことです。
使わないコントロールはファイルに含まれないため、ファイルサイズを削減することができます。
結果として、ロード時間の短縮になり、パフォーマンス改善につながります。
早速カスタムビルドを作成してみましょう。
IgniteUIのダウンロードページでログインし、必要なコントロールを選択するだけです。
1) サインイン
のページにアクセスし、「製品版のダウンロード：サインイン」からサインインを行ってください。
※ここでは、サインインせずにトライアル版のまま進めます。
2) バージョンの選択
サインインが完了すると、バージョン選択で製品版のバージョンを選択することができるようになりますので、
お使いのバージョンを選択してください。
※ここでは、「2016.1 トライアル版」を選択します。
3) コンポーネントの選択
続いて、お使いのコントロールやその機能を選択してください。
依存関係のある他のコントロールにも自動でチェックが入りますので、誤ってチェックを外さないようにご注意ください。
選択が終わったら、画面下部にある「カスタム ビルドのダウンロード」ボタンをクリックして、ダウンロードしてください。
※ここでは、
Gridコントロール
GridShared ※グリッドの共有機能なのでチェック必須です。
RowSelectors（行選択）
Selection（選択）
Updating（更新）
を選択します。
以上でカスタムビルドの作成は終了です。
カスタムビルドを使う
ダウンロードしたziｐファイルを解凍すると、
infragistics.js
というJSファイルが入っていますので、これを core、 lob、dv の代わりに使用するだけでOKです。
なお、解凍されたフォルダにCSSファイルも一緒に入っていますが、CSSファイルも必要なコントロールの分だけがパッケージングされています。
ちなみに、今回作成したカスタムビルドではいったいどのくらい削減できたのか確認してみましょう。
| グリッドその他 | igGirdの更新・選択機能のみの カスタムビルド | |
| 必要なJSファイル | infragistics.core.js infragistics.lob.js | infragistics.js |
| 合計サイズ | 3.18MB | 1.04MB |
単に core + lob を読み込む場合に比べて、2MB 以上もファイルサイズを削減することができました。
これによりロード時間も1/3程度に短縮されます。
特にネットワークの遅い環境においては、この違いが顕著に表れてくるはずです。
まとめ
一口にパフォーマンス改善といっても、原因によって対処方法も全く異なってきますが、今回のようにJSファイルのロード時間が原因となっている場合には、ファイルサイズの削減は効果的な方法です。
カスタムビルドを使用することによって、ファイルサイズを削減し、ロード時間を短縮し、パフォーマンス改善を図る方法をご紹介しました。
