babel-plugin-transform-slow-func-detecter

这个插件用于分析js运行过程中是否存在慢方法。

已实现功能

• 目前支持 react-native, web, node 平台
• 分析同步方法运行时长
• 分析 async 方法运行时长
• 设置报警
  • 限制最大执行时长
  • 限制最大调用次数

1. 安装

yarn add  babel-plugin-transform-slow-func-detecter --save --dev

babel 配置

module.exports = {
  plugins: [
    [
      'babel-plugin-transform-slow-func-detecter',
      {
        printTransformInfo: false, // 是否打印编译阶段的日志
        productionEnvValue: 'production' // 如果 NODE_ENV === ${productionEnvValue} 则跳过此插件，方便在生产环境中使用
      },
    ],
  ],
};

2. 初始化（可选）

import sdf from 'babel-plugin-transform-slow-func-detecter/lib/eventCollecter';

// 参数一（必选）：最大执行时长，范围 >= 0
// 参数二（必选）：最大调用次数，范围 >= 0
// 参数三（可选）：报警事件回调
sdf.init(1, 2, (e) => {
  // 建议先不填写第三个参数，使用默认输出
  console.info(e);
});

3. 通过日志查看慢函数

通过在 init 方法中设置过滤参数，超出阈值的函数调用会在控制台输出日志

4. 报警事件参数说明

type SfdEvent = {
  fileName: String;           // 文件地址
  row: number;                // 方法所在行
  column: number;             // 方法所在列
  isAsync: Boolean;           // 是否是异步方法
  isGenerator: Boolean;       // Generator方法
  funcName: String;           // 方法名称
  time: number;               // 开始时间
  endTime: number;            // 结束时间
  duration: number;           // 时长
  timeFromInitTime: number;   // 方法开始时间 - 应用启动时间
  endTimeFromInitTime: number;// 方法结束时间 - 应用启动时间
  count: number;              // 方法调用次数
  startSeq: number;           // 开始次序
  endSeq: number;             // 结束次序
};