@nwsee/core v0.0.3

Intro

vue项目插件，页面性能监控插件

• 支持监控页面性能指标数据，如FCP、LCP
• 支持监控各个组件从创建到挂载完成的时长
• 支持监控各个组件从创建到卸载的时长
• 支持监控页面静态资源加载的时长
• 支持监控JS错误，从打包文件映射到源码文件的错误位置

install

使用npm下载

npm install @nwsee/core

使用yarn下载

yarn add @nwsee/core

Usage

直接在main.js入口文件中导入，并且使用use()方法注册插件即可使用

import webmonitor from '@nwsee/core'

const app = createApp(App)
app
  .use(webmonitor)

Options

• monitors ：这个值是一个数组，并且数组内的项可以是 lcp 、fcp、resource、component
  • lcp：页面性能指标
  • fcp：页面性能指标，首次内容绘制
  • resource ：开启监控静态资源加载时长
  • component：开启监控组件挂载和卸载的时长
• isMap：这个值是一个布尔值，代表是否开启sourcemap 映射到源文件
• baseUrl：监控服务器地址，所有的错误信息都可以上报到该服务器。sourcemap文件也要上传到监控服务器。（如果开启了isMap，那么这个baseUrl必填）

Demo

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import monitor from '@nwsee/core'

const app = createApp(App)
app.use(monitor,{
  baseUrl:'http://192.168.1.9:3000',
  isMap:true
})
app.mount('#app')