改善首屏加载时间

[cesaryuan]

如下图，chatgpt库加载耗时800ms，极大延长了首屏加载事件

[terwer]

是chatgpt依赖的 ticktoken太大导致。

[cesaryuan]

@terwer 我写了一个脚本来测试首次加载时间（脚本放在最后面了），发现了几个可以优化的点：

使用num run dev编译的代码，时间为50次取平均值

case	首屏加载时间	Disable cache后
原始	1406ms	1695ms
将index.html中modulepreload改为preload	1089ms	1495ms
将chatgpt模块改成动态加载	1018ms	1150ms
preload+chatgpt动态加载	757ms	1000ms

可以看出两个修改点将首屏加载时间从1400ms降低到了757ms，速度提升了一倍

速度测试代码

在任意一个文档块运行即可

(async () => {
    let __costs = []
    for (let i of [...Array(50).keys()]) {
        siyuan.dialogs[0]?.destroy();
        // 打开插件的常规发布页面
        document.getElementById("plugin_siyuan-plugin-publisher_0").click();
        let menuitem = await waitForElement(document.querySelector('#commonMenu > .b3-menu__items'), "#commonMenu > div.b3-menu__items > button:nth-child(3)");
        let start = Date.now();  
        menuitem.click();
        // 等待插件页面加载完成
        let frame = await waitForElement(document.body, "body > div.b3-dialog--open > div > div.b3-dialog__container > div.b3-dialog__body > iframe")
        await new Promise((r) => {
          frame.contentWindow.addEventListener('DOMContentLoaded', () => r());
        })
        await waitForElement(frame.contentDocument, "#app-layout-default > div.default-main > div.platform-desc > p > div > div.el-alert__content")
        // 计算时间
        let cost = Date.now() - start;
        console.log('cost', i, cost)
        __costs.push(cost);
        siyuan.dialogs[0]?.destroy();
    }
    console.log("avg cost:", __costs.reduce((a, b) => a + b, 0) / __costs.length);
})();

function waitForElement(rootElement, cssSelector) {
  return new Promise((resolve) => {
    const element = rootElement.querySelector(cssSelector);
    if (element) {
      resolve(element);
    } else {
      const observer = new MutationObserver(() => {
        const targetElement = rootElement.querySelector(cssSelector);
        if (targetElement) {
          observer.disconnect();
          resolve(targetElement);
        } else {
          console.log('not found')
        }
      });

      const config = {
        childList: true,
        subtree: true,
        attributes: true
      };

      observer.observe(rootElement, config);
    }
  });
}