Merge pull request #922 from bukecat/dev/jianke

dikit-for-web add web-vitals-time plugin

Web/package-lock.json

@@ -14253,6 +14253,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "web-vitals": {
+      "version": "2.1.2",
+      "resolved": "http://registry.npm.xiaojukeji.com/web-vitals/download/web-vitals-2.1.2.tgz",
+      "integrity": "sha1-OmyPrr+Ql6bM0X9fRclIXY1i2rE="
+    },
     "webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npm.taobao.org/webidl-conversions/download/webidl-conversions-6.1.0.tgz",

Web/package.json

@@ -39,6 +39,7 @@
     "serve-handler": "^6.1.3"
   },
   "dependencies": {
-    "vant": "^3.1.0-beta.0"
+    "vant": "^3.1.0-beta.0",
+    "web-vitals": "^2.1.2"
   }
 }

Web/packages/web/src/feature.js

@@ -9,12 +9,13 @@ import AlignRuler from './plugins/align-ruler/index'
 import HelloWorld from './components/ToolHelloWorld'
 import Resource from './plugins/resources/index'
 import ApiMock from './plugins/api-mock/index'
+import WebVitals from './plugins/web-vitals-time/index'
 
 import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
 
 export const BasicFeatures = {
   title: '常用工具',
-  list: [Console, AppInfo, Resource, Network, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
+  list: [Console, AppInfo, Resource, Network, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin, WebVitals]
   // list: [Console, AppInfo, Resource, Network, Storage, H5DoorPlugin]
 }
 
@@ -26,7 +27,7 @@ export const DokitFeatures = {
 export const UIFeatures = {
   title: '视觉功能',
   list: [AlignRuler]
-  // list: [AlignRuler, 
+  // list: [AlignRuler,
   // new RouterPlugin({
   //   nameZh: 'UI结构',
   //   name: 'view-selector',
@@ -34,4 +35,4 @@ export const UIFeatures = {
   //   component: HelloWorld
   // })]
 }
-export const Features = [BasicFeatures, DokitFeatures, UIFeatures]
\ No newline at end of file
+export const Features = [BasicFeatures, DokitFeatures, UIFeatures]

Web/packages/web/src/plugins/web-vitals-time/index.js

+import WebVitalsTime from './info-box.vue'
+import {RouterPlugin} from '@dokit/web-core'
+
+export default new RouterPlugin({
+  nameZh: '性能',
+  name: 'webVitalsTime',
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/6WONqJCVks1621926657356.png',
+  component: WebVitalsTime
+})
+

Web/packages/web/src/plugins/web-vitals-time/info-box.vue

+<template>
+  <div class="web-vitals-time">
+    <div class="title">性能指标(web vitals)</div>
+    <div class="desc">请在页面加载完成后再获取指标</div>
+    <div class="content">
+      <div><span class="item important">FCP：</span>{{FCP}}</div>
+      <div><span class="item important">LCP：</span>{{LCP}}</div>
+      <div><span class="item">CLS：</span>{{CLS}}</div>
+      <div><span class="item">FID：</span>{{FID}}</div>
+      <div><span class="item">TTFB：</span>{{TTFB}}</div>
+    </div>
+  </div>
+</template>
+<script>
+import {getFCP, getLCP, getFID, getCLS, getTTFB} from 'web-vitals';
+export default {
+  data() {
+    return {
+      FCP: '',
+      CLS: '',
+      FID: '',
+      LCP: '',
+      TTFB: ''
+    }
+  },
+  mounted() {
+    getFCP(this.handleData);
+    getLCP(this.handleData, true);
+    getCLS(this.handleData, true);
+    getFID(this.handleData);
+    getTTFB(this.handleData);
+  },
+  methods: {
+    handleData(detail) {
+      console.log(JSON.parse(JSON.stringify(detail)))
+      const { name, value } = detail
+      this[name] = Math.round(value) + ' ms'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.web-vitals-time {
+  padding: 10px;
+  text-align: center;
+  .title {
+    font-weight: bold;
+    font-size: 22px;
+  }
+  .desc {
+    font-size: 12px;
+    color: #999999;
+  }
+  .content {
+    text-align: left;
+    margin-top: 20px;
+    padding-left: 5%;
+  }
+  .item {
+    display: inline-block;
+    text-align: right;
+    width: 60px;
+    margin-top: 4px;
+  }
+  .important {
+    color: red;
+  }
+}
+</style>