Almin + React/Vue 可视化优化性能

weixin_0010034

25人浏览 · 2022-08-09 12:24:18

weixin_0010034 · 2022-08-09 12:24:18 发布

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1DSDYpW3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/625/0%2AcPszCCl-NvXbdngl.png)

Almin是一个类似 Redux/Flux 的状态管理库。但 Almin 旨在帮助客户端 DDD/CQRS。

这种架构也被称为分层架构。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--bv9mpzMo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/1024/0%2AGKnC9nZ8Z4PKHp52.png)

我们发布了Almin 0.14.0支持基于 performance.mark 测量性能配置文件。您可以使用浏览器开发人员工具时间线分析 UseCase 执行、StoreGroup 写入/读取、存储更新。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--i_-aj5al--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/1024/0%2AOezdIE55AzltM6jf.png)

performance.mark 在User Timing Level 2中定义为 Web 标准 API。这意味着 almin 可以在性能配置文件上与 React 和 Vue 等其他库一起使用。

用途

如果你没听说过almin,请看Introduction·Almin.js

您可以通过 performanceProfile 选项打开性能配置文件。

https://gist.github.com/c40f4e11b9b0d131146b4a2c6ac7b546

步数

1.开启performanceProfile选项

加载您的应用
打开浏览器 DevTools “Performance tab and press Record”

4.停止录制

Almin 事件将被分组在 **User Timing** 标签下

实际上,您可以使用 Chrome DevTools 时间线查看性能配置文件。

液体错误:内部

该视频在时间轴上展示了 Almin + React。 React 有?react_perf个选项来进行性能分析。

该示例代码如下。

almin/examples/shopping-cart at master · almin/almin

查看 + Almin

Vue 还支持基于 performance.mark 的性能选项。

我创建了一个使用 Almin + Vue 的示例项目。

azu/vue-almin-counter-example:Vue + Almin 反例

[](https://res.cloudinary.com/practicaldev/image/fetch/s---qFG8JPn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1 .medium.com/max/946/0%2A14HkBqiQTcztxpv6.gif)

Vue 的配置文件显示视图指标(渲染和补丁)
Almin 的配置文件显示 UseCase 执行、StoreGroup 写入/读取、存储更新时间

指标的集合写在以下文档中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2_MdfOuq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/816/0%2AyZ4eGQ5XanPj1S5f.png)