My Stickers Static Website Optimization (表情包纯静态网站优化)
Sticker 官网是一个纯静态的展示网站.
inline css
不同于 config app.
此页面基于 @fluentui/react-northstar 实现的。不支持预编译 css。
代码中我们使用了部分 scss. 我们可以发现打包后的 css 样式文件非常小(573B <1KB),因此直接嵌入到 HTML 中效果更好。
573 B build\sta...
My Stickers App Image Upload Optimization (表情包图片上传优化)
上传流程
用户上传一个图片,采用的方案是：前端上传（减少服务器端压力），后端确认（保证安全性）。在选择图片之后有三个步骤：
前端调用 API 获取上传 URL 和一次性 token (后端无网络调用,响应很快);
前端使用一次性 Token 将文件上传到 API(直传到 Blob,不经过后端,此时文件不可见);
前端后端 API,在 Blob 上创建对应文件(commit)...
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 ...