性能优化

更新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()）非常耗时，除非必要，否则不应使用。