All files / app/assets/javascripts/performance vue_performance_plugin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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;