My Stickers Config App Optimization (表情包应用管理页子应用优化)
首次打开
CDN + http2 优化网页和 js 下载速度
Preconnect 加快 Server 请求
CORS Simple Request
其中:
下载 html 页面
下载 js bundles (库)
下载 js bundles (库)
下载 js 文件(并行)
下载图标(iframe 中可忽略)
请求用户表情列表
CDN...
My Stickers Bot Query Optimization (表情包扩展Bot查询优化)
Query 流程 关键路径
[Teams Client] 客户端点击 Teams 触发 Teams 事件事件 （完全不可控）
[Teams Server] Teams Server 通过 Bot Framework 调用 Stickers Bot API （基本不可控）
[Stickers Server] 查询用户收藏列表数据 (SQL 查询，可控) （50 ~ 300 ...
Azure Function Blob Trigger Polling (Blob Trigger 轮询的机制和坑)
My Stickers 使用 Azure Function App, 通过 Blob Trigger 完整图片自动转换，压缩，和调整大小的功能。
但实际上线后，在存量数据(大约 15 万个文件)处理完后，处理函数触发的次数不多，但是 blob 的 query 次数和数据流量却十分大。
函数日志 (Blob Trigger Log)
通过截取部分测试环境 Function App 的实...
How to mock in jest test (advanced) (jest测试中如何进行mock(测试进阶))
summary
类型
作用范围
场景
module mapper
Global
解决编译问题
tansform
Global
转换某一类型文件
__mocks__
tes...
How to write tests (前端测试基础)
JS 测试框架 JavaScript Testing Framework
选 jest https://github.com/facebook/jest
yarn jest 运行所有测试
JS 基础测试框架对比
Jest
Jest is a delightful JavaScript Testing Framewo...
Pre-render React with react-snap (使用react-snap对react页面进行预渲染)
什么是预渲染
预渲染(pre-render)是提前将静态页面内容进行渲染，用来优化页面响应，SEO 以及生成静态页面.
流行的渲染工具(基于无 puppeteer 浏览器实现)
prerender-spa-plugin webpack 插件
react-snap 命令行工具
单页应用渲染过程
获取入口 html 文件
下载 JS 文件
执行 Jav...