diff options
Diffstat (limited to 'app/assets/javascripts/performance/vue_performance_plugin.js')
-rw-r--r-- | app/assets/javascripts/performance/vue_performance_plugin.js | 53 |
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; |