カスタム可視化コンポーネントのパフォーマンスを最大限に引き出すためのいくつかの推奨事項を以下に示します。
SDK の更新
Quick BI プラットフォームでは、API の新バージョンを定期的にリリースしています。最新の SDK を使用することで、Quick BI の機能を最大限に活用できます。たとえば、@quickbi/bi-open-sdk や @quickbi/bi-open-react-sdk などです。
サードパーティライブラリの CDN 利用
複数のカスタム可視化コンポーネントで共通のサードパーティライブラリ（例：ECharts）を利用する場合、そのライブラリを CDN 上でホストすることを推奨します。これにより、コンポーネントのサイズを削減し、ロード速度を向上させることができます。たとえば、チャート A およびチャート B の開発に ECharts を使用する場合が該当します。
カスタム可視化管理ページで、チャート A およびチャート B のサードパーティライブラリ情報をそれぞれ編集できます。ECharts の CDN URL を入力してください：https://g.alicdn.com/code/lib/echarts/5.4.0/echarts.min.js。
プロフェッショナルモードを利用する場合は、qbi.config.ts のビルド構成ファイルも併せて修正する必要があります。externals 構成に該当のサードパーティライブラリを追加した後、npm run build && npm run bundle を実行して、開発パッケージを生成・アップロードしてください。
export default defineConfig({
externals: {
lodash: '_',
react: 'React',
'react-dom': 'ReactDOM',
moment: 'moment',
// ECharts を外部依存関係として設定
echarts: 'echarts',
},
});組み込みライブラリの活用
Quick BI のカスタム可視化サンドボックスには、以下の組み込みライブラリが提供されています：
react — 16.12.0
react-dom — 16.12.0
lodash — 4.17.20
moment — 2.29.1
これらのライブラリは、サンドボックス内でグローバル変数として利用可能です。コンポーネントのパフォーマンスを最適化するため、上記の特定バージョンを優先的に使用してください。
meta.js のファイルサイズの削減
ホストページのファーストスクリーン表示速度を最適化するため、meta.js へのサードパーティライブラリの過剰なインポートを避けてください。これは、Quick BI がホストページへアクセスした直後に、カスタム可視化コンポーネントの meta.js を即時実行するためです。したがって、meta.js のコンパイル後のサイズは、十分に小さく保つ必要があります。
DOM ノードのキャッシュ
DOM からノードを取得する際は、後続の計算やループ反復処理で再利用できるよう、キャッシュすることを推奨します。ただし、同一エリア内での他のノードの追加・削除を行わないことが前提となります。このキャッシュにより、アプリケーションの効率が向上します。
DOM 操作の回避
DOM 操作は可能な限り制限してください。prepend()、append()、after() などの挿入操作は処理負荷が高いため、必要不可欠な場合を除き使用しないでください。