前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本

本文主要是介绍前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • ⭐前言
      • 💖vue3系列文章
    • ⭐初始化npm项目
      • 💖type为module
      • 💖rollup.config.js
    • ⭐封装fmp耗时计算的class
      • 💖npm build打包class对象
    • ⭐发布npm的beta版本
      • 💖 npm发布beta版本
    • ⭐安装web-performance-tool的beta版本并使用
      • 💖 安装beta版本
      • 💖 vue3中使用
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享关于 前端vite+rollup——封装性能优化的npm包。

什么是 rollup
Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持,但 Rollup 让你今天就可以开始这样做。
npm普遍性
通过 npm,开发者可以轻松地搜索和安装成千上万个可重用的代码包。npm 提供了一个全球性的软件注册表(registry),开发者可以在其中发布他们的模块,以便其他人能够方便地使用它们。

💖vue3系列文章

vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
前端vue3——html2canvas给网站截图生成宣传海报
vue3+echarts可视化——记录我的2023编程之旅
前端vite+vue3——自动化配置路由布局
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)

⭐初始化npm项目

初始化

npm init

npm init

💖type为module

package.json 添加type为module

   {"type": "module"}

安装 rollup

npm install rollup --save-dev
npm install --save-dev @rollup/plugin-json
npm install --save-dev @rollup/plugin-terser

添加build

{"scripts": {"build": "rollup --config"}
}

💖rollup.config.js

配置rollup.config.js,打包src目录下的main.js

// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';export default {input: 'src/main.js',output: [{file: 'dist/index.js',}],plugins: [json(), terser()]
};

⭐封装fmp耗时计算的class

原理:
Performance 接口可以获取到当前页面中与性能相关的信息
performance
并对外暴露一个mutation的使用方式
完整代码如下

class WebPerformance {// performanceperformanceConfig = {}constructor() {// 初始化为{}this.performanceConfig = {}}// 获取performancegetPerformance() {return this.performanceConfig}// 配置performancesetPerformance(key, value) {this.performanceConfig[key] = value}calcPerformance() {// Time to when activation occurredlet activationStart =performance.getEntriesByType("navigation")[0].activationStart;// Time to first paintlet firstPaint = performance.getEntriesByName("first-paint")[0].startTime;// Time to first contentful paintlet firstContentfulPaint = performance.getEntriesByName("first-contentful-paint",)[0].startTime;console.log("time to first paint: " + (firstPaint - activationStart));console.log("time to first-contentful-paint: " + (firstContentfulPaint - activationStart),);this.setPerformance('time to first paint', firstPaint - activationStart)this.setPerformance('time to first-contentful-paint', firstContentfulPaint - activationStart)const entries = performance.getEntriesByType("navigation");const that = thisentries.forEach((entry) => {console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);that.setPerformance('domComplete time', entry.domComplete)const domContentLoadedTime =entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;console.log(`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,);that.setPerformance(entry.name, domContentLoadedTime)});}// 监听 dom变化mutationDomAction(listenDom, callbackAction) {console.log('listenDom', listenDom);// 观察器的配置(需要观察什么变动)const config = { attributes: true, childList: true, subtree: true };// 当观察到变动时执行的回调函数const callback = function(mutationsList, observer) {console.log('listenDom', listenDom)const renderHeight = listenDom.offsetHeightconsole.log('renderHeight_____________', renderHeight)console.log('change_______________', mutationsList)// Use traditional 'for loops' for IE 11// for (let mutation of mutationsList) {//     if (mutation.type === "childList") {//         console.log("A child node has been added or removed.");//     } else if (mutation.type === "attributes") {//         console.log("The " + mutation.attributeName + " attribute was modified.");//     }// }if (parseInt(renderHeight)) {// 第一次监听dom 存在高度则判定已经渲染完root节点,不关注子节点callbackAction()// 停止观察observer.disconnect();}};// 创建一个观察器实例并传入回调函数const observer = new MutationObserver(callback);// 以上述配置开始观察目标节点observer.observe(listenDom, config);}
}export { WebPerformance }

注意其中的class需要export抛出来。

💖npm build打包class对象

打包对象

npm run build

结果如下,打包的index文件已经压缩
build

⭐发布npm的beta版本

发布npm的基础篇
nodejs_npm发布package
配置npm包的package.json

npm set
配置如下

{"name": "web-performance-tool","version": "1.0.0-bata.0","description": "web performance calc","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["fmp","fp","performance"],"author": "yma16","license": "ISC"
}

💖 npm发布beta版本

npm publish --tag beta

发布成功
npm publish beta
npm包的地址
https://www.npmjs.com/package/web-performance-tool
npm package

⭐安装web-performance-tool的beta版本并使用

💖 安装beta版本

npm 安装指定镜像https://registry.npmmirror.com

npm install web-performance-tool@beta --registry https://registry.npmmirror.com

使用yarn

yarn add  web-performance-tool@beta --registry https://registry.npmmirror.com

💖 vue3中使用

页面渲染完使用WebPerformance

import {WebPerformance} from 'web-performance-tool';
onMounted(()=>{const WebPerformanceInstance=new WebPerformance();// 计算性能WebPerformance.calcPerformance();console.log('性能指标:',WebPerformanceInstance.getPerformance())
})

计算结果符合预期:

time to first paint: 1326.7000000001863
time to first-contentful-paint: 1326.7000000001863

在这里插入图片描述

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
earth

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!

这篇关于前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/952372

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

高效+灵活,万博智云全球发布AWS无代理跨云容灾方案!

摘要 近日,万博智云推出了基于AWS的无代理跨云容灾解决方案,并与拉丁美洲,中东,亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础,将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合,为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日,万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频,介绍了

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo