hugh 的个人博客

随着监控功能的逐步完善， 我们从最初的错误监控，一步步新增了请求、tracking、性能、录屏、自定义性能打点等等功能，数据收集js已经达到了30k， 这种情况下，最小化脚本已经是必须要做的事情了。

最小化脚本：

包含了监控框架的主体功能， 用于预收集数据，保存在内存或者本地缓存中，还可具备异步加载全量监控脚本的工作

需要具备哪些特征：

1. 体积足够小

2. 实现的监控收集的主体功能

3. 在全量收集脚本加载之后， 该部分功能需要兼容或者失效

 

如何最小化监控脚本

1. 从功能角度，抽离出基础的功能

a. 对js错误的监控 window.onerror

window.onerror = function(message, source, lineno, colno, error) {
        if(!window.FE_Moniter) { // 如果已经加载了框架主体， 则不处理该错误
            addErrorToMht(error)
        }
    }

b. 对资源错误的监控 document.onerror

 document.addEventListener("error", function(e) {
        addEventToMht(e) // 事件信息保存到内存或本地缓存
    }, true)

c. 提供统一的api， 主要包括mark(标记打点)， measure(计算时间差)， track(记录事件)

d. 防止错误阻塞会快速退出的情况，在pageunload时，将数据写入本地缓存

 

2. 在主监控脚本中对数据进行获取及发送

主要针对以上几类进行分别处理

a. 获取内存中收集到的数据，进行数据发送

 

3. 引用

a. 使用IIFE, 将构建好的代码发布到CDN, 直接引用

b. 基于webpack构建

AMD：构建，需要使用define,require引用， 你可以使用类似requireJs的框架引用

commonJS：需要exports,require， 可以在实现commonJS规范的框架中运行

UMD: 打包成支持AMD\commonJs\script加载的代码, 代码如下

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["fe_monitor"] = factory();
	else
		root["fe_monitor"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return xxx
})

在html页面应用UMD格式的最小化脚本， 在页面代码中 使用AMD或者commonJS模式加载主体框架即可

c. 实际项目中

实际项目中如果使用webpack构建， 这时候，可以使用UMD构建， 然后将最小化脚本在页面head中引入

或者使用webpack-concat-plugin

new ConcatPlugin({
        uglify: true,
        sourceMap: false,
        name: 'argus',
        outputPath: config.dev.assetsRoot+"/static/js",
        fileName: '[name].[hash].js',
        filesToConcat: ['src/lib/monitor_init.js'],
  })</pre>

在Html中引入即可
<script src="<%= htmlWebpackPlugin.files.webpackConcat.argus %>" type="text/javascript"></script>