fix: some performance update

async import some large modules

Author: Chronostasys

.vscode/extensions.json

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import * as echarts from "echarts";
 import { ref, Ref, onMounted, inject } from "vue";
 import { getSunBurstData, getTotalCov, SunBurstData } from "@/hooks/codecov";
 const covchartsDom = ref<HTMLInputElement | null>(null);
@@ -9,40 +8,42 @@ const totalCovTarget = ref("Pivot Lang");
 const isMobile = inject("isMobile") as boolean;
 
 onMounted(async () => {
-  const data = getSunBurstData(await getTotalCov());
-  totalCov.value = data.coverage;
-  const option = {
-    tooltip: {
-      trigger: "item",
-    },
-    series: {
-      type: "sunburst",
-      sort: undefined,
+  import("echarts").then(async (echarts) => {
+    const data = getSunBurstData(await getTotalCov());
+    totalCov.value = data.coverage;
+    const option = {
       tooltip: {
-        formatter: handleCovChange,
-      },
-      emphasis: {
-        disable: true,
+        trigger: "item",
       },
-      data: data.children,
-      label: {
-        formatter: "",
-        show: false,
+      series: {
+        type: "sunburst",
+        sort: undefined,
+        tooltip: {
+          formatter: handleCovChange,
+        },
+        emphasis: {
+          disable: true,
+        },
+        data: data.children,
+        label: {
+          formatter: "",
+          show: false,
+        },
+        levels: [],
       },
-      levels: [],
-    },
-  };
-  const myChart = echarts.init(covchartsDom.value as HTMLElement);
-  const loadEcharts = () => {
-    const { top, bottom } = (
-      covchartsDom.value as HTMLElement
-    ).getBoundingClientRect();
-    if (top < window.innerHeight && bottom > 0) {
-      window.removeEventListener("scroll", loadEcharts);
-      myChart.setOption(option);
-    }
-  };
-  window.addEventListener("scroll", loadEcharts);
+    };
+    const myChart = echarts.init(covchartsDom.value as HTMLElement);
+    const loadEcharts = () => {
+      const { top, bottom } = (
+        covchartsDom.value as HTMLElement
+      ).getBoundingClientRect();
+      if (top < window.innerHeight && bottom > 0) {
+        window.removeEventListener("scroll", loadEcharts);
+        myChart.setOption(option);
+      }
+    };
+    window.addEventListener("scroll", loadEcharts);
+  });
   // myChart.setOption(option);
 });
 

src/components/codecovEcharts.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { PlMonaco } from "@pivot-lang/create-monaco";
 import axios from "axios";
 import { nextTick } from "vue";
 import { onMounted, ref } from "vue";

src/components/tabList.vue

@@ -15,17 +15,20 @@ import {
 import { ref, onMounted, watch } from "vue";
 import { basicCode } from "@/constant";
 import { memberList } from "@/constant";
-import createMonaco, { PlMonaco } from "@pivot-lang/create-monaco";
+// import createMonaco, { PlMonaco } from "@pivot-lang/create-monaco";
 import CodeBlock from "@/components/codeBlock.vue";
 import { cp } from "fs";
 import "xterm/css/xterm.css";
 import { Terminal } from "xterm";
 
 const tabVal = ref("hello world");
 const tabList = basicCode.map((item) => item.title);
-let monaco: PlMonaco;
 let code = ref("");
 let runResult = ref("");
+let initialized = ref(false);
+let watchCallback = (val:string) => {
+  console.log('not initialized yet...');
+};
 function gotoEmail() {
   window.location.href = "mailto:[email protected]";
 }
@@ -47,41 +50,47 @@ function handleOutput(re: string) {
 }
 
 onMounted(async () => {
-  monaco = createMonaco(
-    document.getElementById("container")!,
-    basicCode[0].code
-  );
   code.value = basicCode[0].code;
-  monaco.editor.onDidChangeModelContent(() => {
-    code.value = monaco.editor.getModel()!.getValue();
+  import("@pivot-lang/create-monaco").then(pl=>{
+    let monaco = pl.default(
+      document.getElementById("container")!,
+      basicCode[0].code
+    );
+    monaco.editor.onDidChangeModelContent(() => {
+      code.value = monaco.editor.getModel()!.getValue();
+    });
+    terminal.open(document.querySelector(".code-block") as HTMLElement);
+    terminal.resize(44, 17);
+    watchCallback =   (val) => {
+      const code1 = basicCode.find((item) => item.title === val)?.code || "";
+      code.value = code1;
+      monaco.setContent(code1);
+    };
+    initialized.value = true;
   });
-  terminal.open(document.querySelector(".code-block") as HTMLElement);
-  terminal.resize(44, 17);
 });
 watch(
   () => tabVal.value,
   (val) => {
-    const code1 = basicCode.find((item) => item.title === val)?.code || "";
-    code.value = code1;
-    monaco.setContent(code1);
+    watchCallback(val);
   }
 );
 </script>
 
 <template>
   <div class="container">
     <Nav></Nav>
-    <FirstPage :monaco="monaco"></FirstPage>
+    <FirstPage></FirstPage>
     <div id="code-show">
       <div class="gradient-font title">Enjoy coding pivot lang now!</div>
       <div class="detail-describe">
         With the help of Web Assembly technology, we are able to provide support
         for some of the Pivot Lang syntax in the browser for you to experience.
       </div>
-      <div class="code-now-container">
+      <div v-show="initialized" class="code-now-container">
         <div class="code-box">
           <TabList
-            @updateVal="(val) => (tabVal = val)"
+            @updateVal="(val:string) => (tabVal = val)"
             @updateOutput="handleOutput"
             :tablist="tabList"
             :val="tabVal"
@@ -96,6 +105,9 @@ watch(
           <div class="code-block"></div>
         </div>
       </div>
+      <div v-show="!initialized" class="code-now-container">
+        <div class="spinner"></div>
+      </div> 
     </div>
     <div id="advantage">
       <div class="gradient-font title">Immix Garbage Collector</div>
@@ -334,4 +346,18 @@ watch(
     }
   }
 }
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.spinner {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  margin: auto;
+}
 </style>