fix: plugin hook duration calculation logic

Author: webfansplz

packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue

@@ -42,31 +42,31 @@ const hookLoadDuration = computed(() => {
   if (!loadMetrics?.length) {
     return
   }
-  return loadMetrics[loadMetrics.length - 1]!.timestamp_end - loadMetrics[0]!.timestamp_start
+  return loadMetrics.reduce((arc, item) => arc + item.duration, 0)
 })
 
 const hookTransformDuration = computed(() => {
   const transformMetrics = state.value?.transformMetrics
   if (!transformMetrics?.length) {
     return
   }
-  return transformMetrics[transformMetrics.length - 1]!.timestamp_end - transformMetrics[0]!.timestamp_start
+  return transformMetrics.reduce((arc, item) => arc + item.duration, 0)
 })
 
 const hookResolveIdDuration = computed(() => {
   const resolveIdMetrics = state.value?.resolveIdMetrics
   if (!resolveIdMetrics?.length) {
     return
   }
-  return resolveIdMetrics[resolveIdMetrics.length - 1]!.timestamp_end - resolveIdMetrics[0]!.timestamp_start
+  return resolveIdMetrics.reduce((arc, item) => arc + item.duration, 0)
 })
 
 const totalDuration = computed(() => {
   const calls = state.value?.calls
   if (!calls?.length) {
     return
   }
-  return calls[calls.length - 1]!.timestamp_end - calls[0]!.timestamp_start
+  return calls.reduce((arc, item) => arc + item.duration, 0)
 })
 </script>
 
@@ -86,26 +86,26 @@ const totalDuration = computed(() => {
       <div text-xs font-mono flex="~ items-center gap-3" ml2>
         <DisplayDuration
           :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
-          :title="`Resolve Id hooks cost: ${hookResolveIdDuration}ms`"
+          :title="`Resolve Id hooks cost: ${hookResolveIdDuration ?? 0}ms`"
         >
           <span i-ph-magnifying-glass-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
           :duration="hookLoadDuration" flex="~ gap-1 items-center"
-          :title="`Load hooks cost: ${hookLoadDuration}ms`"
+          :title="`Load hooks cost: ${hookLoadDuration ?? 0}ms`"
         >
           <span i-ph-upload-simple-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
           :duration="hookTransformDuration" flex="~ gap-1 items-center"
-          :title="`Transform hooks cost: ${hookTransformDuration}ms`"
+          :title="`Transform hooks cost: ${hookTransformDuration ?? 0}ms`"
         >
           <span i-ph-magic-wand-duotone inline-block />
         </DisplayDuration>
         <span op40>|</span>
         <DisplayDuration
           :duration="totalDuration" flex="~ gap-1 items-center"
-          :title="`Total build cost: ${totalDuration}ms`"
+          :title="`Total build cost: ${totalDuration ?? 0}ms`"
         >
           <span i-ph-clock-duotone inline-block />
         </DisplayDuration>

packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue

@@ -16,17 +16,12 @@ function normalizeMetrics(metrics: PluginBuildInfo[]) {
     modules: 0,
   }
   const seen = new Set()
-  metrics.forEach((metric, index) => {
+  metrics.forEach((metric) => {
     if (!seen.has(metric.module)) {
       seen.add(metric.module)
       info.modules++
     }
-    if (index === 0) {
-      info.duration = metric.timestamp_start
-    }
-    if (index === metrics.length - 1) {
-      info.duration = metric.timestamp_end - info.duration
-    }
+    info.duration += metric.duration
   })
   if (info.duration === 0) {
     info.duration = null!