feat(plugins): add total execution time

nuxt · Apr 23, 2023 · 2cbb52e · 2cbb52e
1 parent 4a082d1
commit 2cbb52e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
@@ -69,6 +69,8 @@ export interface PluginInfoWithMetic {
 
 export interface PluginMetric {
   src: string
+  start: number
+  end: number
   duration: number
 }
 

diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue
@@ -22,6 +22,13 @@ const plugins = computed((): PluginInfoWithMetic[] => {
     }
   })
 })
+
+const totalTime = computed(() => {
+  const metics = client.value.getClientPluginMetrics()
+  const minStart = Math.min(...metics.map(m => m.start))
+  const maxEnd = Math.max(...metics.map(m => m.end))
+  return maxEnd - minStart
+})
 </script>
 
 <template>
@@ -39,6 +46,12 @@ const plugins = computed((): PluginInfoWithMetic[] => {
         :index="idx + 1"
         ml--4 border-base py2 :class="idx ? 'border-t' : ''"
       />
+
+      <div class="text-sm" flex="~ gap-1 items-center justify-end" mt-3>
+        <div i-carbon-timer text-lg op75 />
+        <span op50>Total execution time:</span>
+        <DurationDisplay :duration="totalTime" :factor="10" />
+      </div>
     </div>
   </NSectionBlock>
 

diff --git a/packages/devtools/src/integrations/plugin-metrics.ts b/packages/devtools/src/integrations/plugin-metrics.ts
@@ -33,6 +33,8 @@ function ${WRAPPER_KEY} (plugin, src) {
     const end = performance.now()
     globalThis.${PAYLOAD_KEY}.push({
       src,
+      start,
+      end,
       duration: end - start,
     })
     return result