perf: pagespy 引入

1 year ago · d0046bb26f
parent e4689303d2
commit d0046bb26f
5 changed files with 44 additions and 20 deletions
--- a/index.html
+++ b/index.html
@ -7,20 +7,10 @@
    <title>销售平台</title>
    <link rel="preconnect" crossorigin="anonymous" href="https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com">
    <link rel="preconnect" crossorigin="anonymous" href="https://hiana-crm.oss-ap-southeast-1.aliyuncs.com">
-    <script crossorigin="anonymous" src="https://page-spy.mycht.cn/page-spy/index.min.js"></script>
-    <script crossorigin="anonymous" src="https://page-spy.mycht.cn/plugin/data-harbor/index.min.js"></script>
-    <script crossorigin="anonymous" src="https://page-spy.mycht.cn/plugin/rrweb/index.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <p style="display: none;">VERSION: %BUILD_VERSION%</p>
-    <script defer>
-      window.initPageSpy = function () {
-        PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 2 * 1024 * 1024, }));
-        window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: 'Sales CRM', title: window.__spytitle, autoRender: false, });
-        // console.log(window.$pageSpy.address.substring(0, 4)); // device ID
-      }
-    </script>
  </body>
 </html>
--- a/src/stores/AuthStore.js
+++ b/src/stores/AuthStore.js
@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import { fetchJSON, appendRequestHeader } from '@/utils/request'
-import { isEmpty, isNotEmpty } from '@/utils/commons'
+import { isEmpty, isNotEmpty, } from '@/utils/commons'
+import { loadPageSpy } from '@/utils/pagespy'

 const useAuthStore = create((set, get) => ({

@ -82,15 +83,15 @@ const useAuthStore = create((set, get) => ({
    }

    if (sessionData !== null) {
-      const sesstionObj = JSON.parse(sessionData)
+      const sesstionObj = JSON.parse(sessionData);
      set(() => ({
-        loginUser: sesstionObj
-      }))
+        loginUser: sesstionObj,
+      }));

-      appendRequestHeader('X-User-Id', sesstionObj.userId)
+      appendRequestHeader('X-User-Id', sesstionObj.userId);

-      window.__spytitle = sesstionObj.username;
-      window.initPageSpy();
+      const __spytitle = sesstionObj.username;
+      loadPageSpy(__spytitle);
    }
  },

--- a/src/utils/commons.js
+++ b/src/utils/commons.js
@ -548,3 +548,20 @@ export const clearAllCaches = async (cb) => {
    console.error('Error clearing caches or unregistering service worker:', error);
  }
 };
+
+export const loadScript = (src) => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.onload = resolve;
+    script.onerror = reject;
+    script.crossOrigin = 'anonymous';
+    script.src = src;
+    if (document.head.append) {
+      document.head.append(script);
+    } else {
+      document.getElementsByTagName('head')[0].appendChild(script);
+    }
+  });
+};
+
--- a/src/utils/pagespy.js
+++ b/src/utils/pagespy.js
@ -0,0 +1,15 @@
+import { loadScript } from '@/utils/commons';
+
+export const loadPageSpy = (title) => {
+  const PageSpySrc = [
+    'https://page-spy.mycht.cn/page-spy/index.min.js',
+    'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',
+    'https://page-spy.mycht.cn/plugin/rrweb/index.min.js',
+  ];
+  Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
+    // 注册插件
+    PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 2 * 1024 * 1024 }));
+    // 实例化 PageSpy
+    window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title, autoRender: false });
+  });
+};
--- a/src/views/PageSpy.jsx
+++ b/src/views/PageSpy.jsx
@ -1,8 +1,9 @@
-const PageSpy = () => {
+const PageSpyLog = () => {
  return (
    <>
      {window.$pageSpy && (
-        <a className='text-primary'
+        <a
+          className='text-primary'
          onClick={() => {
            window.$pageSpy.triggerPlugins('onOfflineLog', 'download');
            window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
@ -13,4 +14,4 @@ const PageSpy = () => {
    </>
  );
 };
-export default PageSpy;
+export default PageSpyLog;