Loaders 时序图#

功能概览#

我们在 Rsdoctor 的导航栏上点击 「Compile Analysis」-> 「Loader Analysis」选项的二级菜单 「Loaders Timeline」，可以看到当前项目中所有 Loader 的执行时序图，当然这个页面需要开启 loader 分析能力才会展示 features，其内容如下图所示：

名词释义#

页面中图表内的字段含义如下：

名词	描述说明
files	代表 Loader 处理的文件总数
files(node_modules)	代表 Loader 处理 node_modules 内的文件数量
files(outside the cwd)	代表 Loader 处理 cwd 之外的文件数量
duration	代表 Loader 执行的预估耗时
start(min)	代表 Loader 所有数据中的最小开始时间
end(max)	代表该 Loader 所有数据中的最大结束时间
isPitch	代表 Loader 本次执行是否为 pitch 函数
filepath	代表 Loader 所接收的文件路径
start	代表 Loader 本次执行的开始时间
end	代表 Loader 本次执行的结束时间

使用说明#

在 Loader 时序图 中，图表内的左侧 Y 轴代表了 Loader 名称，顶部 X 轴则对应了时间 (时:分:秒)，我们可以通过图表内的缩放，以及鼠标悬浮去查看更详细的 Loader 调用信息。

页面顶部有两个筛选框，可以输入想要筛选的 Loaders 或 Files，时序图就是根据筛选的内容进行展示。

查看 Loader 总信息#

我们如果想要查看单个 Loader 所有数据的调用信息汇总，可以通过鼠标悬浮到如下图所示的位置：

此时，我们就可以看到单个 Loader 内的所有调用信息汇总（字段释义详见名词释义），如下图所示：

查看单个 Loader 调用信息#

我们如果想要查看单个 Loader 的单次调用信息，可以通过鼠标悬浮到如下图所示位置内的任意一个色彩条纹上，此时，我们就可以看到单个 Loader 内的本次调用信息（字段释义详见名词释义），如下图所示：