效能最佳化 - Quick BI

下面是有關如何?自訂可視化組件最佳效能的一些建議。

更新SDK

隨著我們不斷改進和增強，新版的API會不斷髮布。若要充分利用Quick BI平台的功能，建議使用最新版本的@quickbi/bi-open-sdk或@quickbi/bi-open-react-sdk等SDK。

三方庫CDN

當您需要開發多個自訂可視化組件，且都依賴相同的三方庫時，如果將三方庫抽出來放到CDN上，則可以大幅減少組件體積，從而提升載入速度。以下說明如何設定：假設現在要用 echarts 開發一個A圖表和一個B圖表。

首先在自訂可視化管理頁分別修改A圖表和B圖表的三方庫資訊，填入 echarts 的 CDN 地址： 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 體積

由於Quick BI在進入宿首頁面時會立即執行自訂可視化組件的meta.js，為了宿首頁首屏載入速度，請不要在meta.js內引入過多的第三方庫，以確保meta.js編譯後的體積足夠小。

緩衝 DOM 節點

從DOM檢索節點或節點列表時，需要考慮是否可以在後續計算（有時甚至是下一次迴圈迭代）中重用它們。只要不需要在相關地區添加或刪除其他節點，緩衝它們便可以提高應用程式的整體效率。

避免 DOM 操作

儘可能限制DOM操作。插入操作（如 prepend()、append() 和 after()）非常耗時，除非必要，否則不應使用。