1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/performance/vue_performance_plugin.js b/app/assets/javascripts/performance/vue_performance_plugin.js
new file mode 100644
index 00000000000..7329b83b1d1
--- /dev/null
+++ b/app/assets/javascripts/performance/vue_performance_plugin.js
@@ -0,0 +1,53 @@
+const ComponentPerformancePlugin = {
+  install(Vue, options) {
+    Vue.mixin({
+      beforeCreate() {
+        /** Make sure the component you want to measure has `name` option defined
+         * and it matches the one you pass as the plugin option. Example:
+         *
+         * my_component.vue:
+         *
+         * ```
+         * export default {
+         *   name: 'MyComponent'
+         *   ...
+         * }
+         * ```
+         *
+         * index.js (where you initialize your Vue app containing <my-component>):
+         *
+         * ```
+         * Vue.use(PerformancePlugin, {
+         *   components: [
+         *     'MyComponent',
+         *   ]
+         * });
+         * ```
+         */
+        const componentName = this.$options.name;
+        if (options?.components?.indexOf(componentName) !== -1) {
+          const tagName = `<${componentName}>`;
+          if (!performance.getEntriesByName(`${tagName}-start`).length) {
+            performance.mark(`${tagName}-start`);
+          }
+        }
+      },
+      mounted() {
+        const componentName = this.$options.name;
+        if (options?.components?.indexOf(componentName) !== -1) {
+          this.$nextTick(() => {
+            window.requestAnimationFrame(() => {
+              const tagName = `<${componentName}>`;
+              if (!performance.getEntriesByName(`${tagName}-end`).length) {
+                performance.mark(`${tagName}-end`);
+                performance.measure(`${tagName}`, `${tagName}-start`);
+              }
+            });
+          });
+        }
+      },
+    });
+  },
+};
+
+export default ComponentPerformancePlugin;