feat(perf): limit size of arrays sent to devtools

Guillaume Chau · Guillaume Chau · commit b3baab5b0ef1 · 2019-03-24T20:07:02.000+01:00
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
@@ -172,7 +172,7 @@
       class="children"
     >
       <data-field
-        v-for="subField in limitedSubFields"
+        v-for="subField in formattedSubFields"
         :key="subField.key"
         :field="subField"
         :parent-field="field"
@@ -185,10 +185,11 @@
         :is-state-field="isStateField"
       />
       <span
-        v-if="formattedSubFields.length > limit"
+        v-if="subFieldCount > limit"
+        v-tooltip="'Show more'"
         :style="{ marginLeft: depthMargin + 'px' }"
         class="more"
-        @click="limit += 10"
+        @click="showMoreSubfields()"
       >
         ...
       </span>
@@ -273,7 +274,7 @@ export default {
   data () {
     return {
       contextMenuOpen: false,
-      limit: Array.isArray(this.field.value) ? 10 : Infinity,
+      limit: 20,
       expanded: this.depth === 0 && this.field.key !== '$route' && (subFieldCount(this.field.value) < 5)
     }
   },
@@ -309,7 +310,7 @@ export default {
         } else {
           return 'string'
         }
-      } else if (Array.isArray(value)) {
+      } else if (Array.isArray(value) || (value && value._isArray)) {
         return 'array'
       } else if (isPlainObject(value)) {
         return 'plain-object'
@@ -367,7 +368,7 @@ export default {
       }
     },
 
-    formattedSubFields () {
+    rawValue () {
       let value = this.field.value
 
       // CustomValue API
@@ -378,8 +379,17 @@ export default {
         value = value._custom.value
       }
 
+      if (value && value._isArray) {
+        value = value.items
+      }
+      return { value, inherit }
+    },
+
+    formattedSubFields () {
+      let { value, inherit } = this.rawValue
+
       if (Array.isArray(value)) {
-        value = value.map((item, i) => ({
+        return value.slice(0, this.limit).map((item, i) => ({
           key: i,
           value: item,
           ...inherit
@@ -394,11 +404,13 @@ export default {
           value = sortByKey(value)
         }
       }
-      return value
+
+      return value.slice(0, this.limit)
     },
 
-    limitedSubFields () {
-      return this.formattedSubFields.slice(0, this.limit)
+    subFieldCount () {
+      const { value } = this.rawValue
+      return subFieldCount(value)
     },
 
     valueTooltip () {
@@ -505,6 +517,10 @@ export default {
       this.$_contextMenuTimer = setTimeout(() => {
         this.contextMenuOpen = false
       }, 4000)
+    },
+
+    showMoreSubfields () {
+      this.limit += 20
     }
   }
 }
diff --git a/src/util.js b/src/util.js
@@ -60,6 +60,7 @@ export const SPECIAL_TOKENS = {
 }
 
 export const MAX_STRING_SIZE = 10000
+export const MAX_ARRAY_SIZE = 5000
 
 export function specialTokenToString (value) {
   if (value === null) {
@@ -120,6 +121,14 @@ export function stringify (data) {
 function replacer (key, val) {
   const type = typeof val
   if (Array.isArray(val)) {
+    const l = val.length
+    if (l > MAX_ARRAY_SIZE) {
+      return {
+        _isArray: true,
+        length: l,
+        items: val.slice(0, MAX_ARRAY_SIZE)
+      }
+    }
     return val
   } else if (typeof val === 'string') {
     if (val.length > MAX_STRING_SIZE) {
