钉钉红包性能优化之路 - 实践
一、业务背景
请客红包、小礼物作为饿了么自研的业务产品,在钉钉的一方化入口中常驻,作为高UV、PV的toB产品,面对不同设备环境的用户,经常会偶尔得到一些用户反馈,如【页面白屏太久了】、【卡住了】等等,本文将以产品环境为出发点(App中的H5),以前端基础、加载链路、端能力三个方向进行性能优化。
基于现阶段业务架构,在应用层进行通用的性能优化action拆解。
整体优化后接近秒开,效果如下:
二、前端基础优化
2.1. 构建产物瘦身
作为前端基础优化的出水口,可通过webpack analyzer插件分析dist产物的具体分布,主要action如下:
- 按需加载antd,减少79.28kb
- 大型通用库接入cdn,基于externals排出构建包,减少65.08kb
- debug工具生产环境不引入:vconsole,减少一次生产的http js请求
- polyfill拆分,减少28.45kb
- 钉钉、饿了么域接口返回图片裁剪,平均单张图片减少80%大小,请求时间减少80%
- 压缩器从esbuild切换至terser(牺牲时间、提升压缩率),减少100.2kb
- 移除无用的包:deepcopy、md5-js,减少3.58kb
- 按需引入lodash、dingtalk-jsapi、crypto-js,减少49.18kb
关键优化代码:
// case1:按需引入大npm包
import setTitle from '@ali/dingtalk-jsapi/api/biz/navigation/setTitle'
;
import openLink from '@ali/dingtalk-jsapi/api/biz/util/openLink'
;
import setScreenKeepOn from '@ali/dingtalk-jsapi/api/biz/util/setScreenKeepOn'
;
// case2:externals拆包,转cdn引入
externals: {
react: 'React'
,
'react-dom': 'ReactDOM'
,
}
// case3:图片裁剪,降低质量、大小降低图片请求耗时
import getActualSize from './getActualSize'
;
import getImageType from './getImageType'
;
const getActualEleImageUrl = (url: string
, size: number
) =>
{
if (
typeof url === 'string' && url.includes('cube.elemecdn.com'
)
) {
const imageType = getImageType(url)
;
const relSize = getActualSize(size)
;
const end = `?x-oss-process=image/resize,m_mfit,w_${relSize
},h_${relSize
}/format,${imageType
}/quality,q_90`
;
return `${url
}${end
}`
;
}
return url;
}
;
// case4:按需加载antd-mobile
extraBabelPlugins: [
[
'import'
,
{
libraryName: 'antd-mobile'
,
libraryDirectory: 'es/components'
,
}
,
]
,
]
,
结果:
- 性能优化构建包gzip压缩后大小减少305.59KB,优化后大小474.74KB,下降39.1%;
- 性能优化首屏加载冷启动FP减少400ms,热启动FP减少1s;
2.2. 预加载&预解析
将应用中所用到的所有请求资源的能力统一前置配置在html head,减少所有资源类请求的耗时。
links: [
{
rel: 'dns-prefetch'
,
href: 'https://g.alicdn.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://g.alicdn.com/'
,
}
,
{
rel: 'dns-prefetch'
,
href: 'https://gw.alicdn.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://gw.alicdn.com/'
,
}
,
{
rel: 'dns-prefetch'
,
href: 'https://img.alicdn.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://img.alicdn.com/'
,
}
,
{
rel: 'dns-prefetch'
,
href: 'https://assets.elemecdn.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://assets.elemecdn.com/'
,
}
,
{
rel: 'dns-prefetch'
,
href: 'https://static-legacy.dingtalk.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://static-legacy.dingtalk.com/'
,
}
,
{
rel: 'dns-prefetch'
,
href: 'https://cube.elemecdn.com/'
,
}
,
{
rel: 'preconnect'
,
href: 'https://cube.elemecdn.com/'
,
}
,
{
rel: 'preload'
,
as: 'script'
,
href: 'https://g.alicdn.com/??/code/lib/react/18.2.0/umd/react.production.min.js,/code/lib/react-dom/18.2.0/umd/react-dom.production.min.js'
,
}
,
]
,
2.3 分包
到的所有请求在整个项目中以页面组件、公共组件、大npm包三个方向进行分包拆解,大体分包策略是尽可能减少SPA首次访问路由的chunk体积,策略如下:
- node_modules里面大于160kb的模块拆分成单独的chunk;
- 公共组件至少被引入3次拆分成单独的chunk;
分包关键代码:
optimization: {
moduleIds: 'deterministic'
, // 确保模块id稳定
chunkIds: 'named'
, // 确保chunk id稳定
minimizer: [
new TerserJSPlugin({
parallel: true
, // 开启多进程压缩
extractComments: false
,
}
)
,
new CssMinimizerPlugin({
minimizerOptions: {
parallel: true
, // 开启多进程压缩
preset: [
'default'
,
{
discardComments: {
removeAll: true
}
,
}
,
]
,
}
,
}
)
,
]
,
splitChunks: {
chunks: 'all'
,
maxAsyncRequests: 5
, // 同时最大请求数
cacheGroups: {
// 第三方依赖
vendors: {
test: /[\/]node_modules[\/]/
,
name(module) {
const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/
)[1]
;
return `vendor-${packageName.replace('@'
, ''
)
}`
;
}
,
priority: 20
,
}
,
// 公共组件
commons: {
test: /[\/]src[\/]components[\/]/
,
name: 'commons'
,
minChunks: 3
, // 共享模块最少被引用次数
priority: 15
,
reuseExistingChunk: true
,
}
,
lib: {
// 把node_modules里面大于160kb的模块拆分成单独的chunk
test(module) {
return (
module.size(
) >
160 * 1024 &&
/node_modules[/\]/.test(module.nameForCondition(
) || ''
)
)
;
}
,
// 把剩余的包打成一个chunk
name(module) {
const packageNameArr = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/
)
;
const packageName = packageNameArr ? packageNameArr[1] : ''
;
return `chunk-lib.${packageName.replace('@'
, ''
)
}`
;
}
,
priority: 15
,
minChunks: 1
,
reuseExistingChunk: true
,
}
,
// 默认配置
default: {
minChunks: 2
,
priority: 10
,
reuseExistingChunk: true
,
name(module, chunks) {
const allChunksNames = chunks.map((item) => item.name).join('~'
)
;
return `common-${allChunksNames
}`
;
}
,
}
,
}
,
}
,
}
,
三、加载链路优化
3.1 DOM load前置优化
在SPA所有JS文件解析完成(整个页面呈现),在前置可增加loading态替代白屏减少用户的等待焦虑,具体的思路是在html response -> js chunk全部解析完成中间,增加一个loading状态,提升FP、FCP性能指标,具体行动是编写了一个webpack html构建完的插件,在构建结果中的html手动注入loading组件。
插件实现比较简单:
import {
IApi
}
from 'umi'
;
export
default (api: IApi) =>
{
// 用于在html ready到SPA应用js ready之间增加钉钉标准loading
api.modifyHTML(($) =>
{
$('head'
).prepend(`
<style>body, html {width: 100%;height: 100%;margin: 0;padding: 0;border: 0;box-sizing: border-box;}#html-ding-loading-container {width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.2);opacity: 1;}#ding-loading {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: lightningAnimate 1s steps(1, start) infinite;width: 3.6rem;height: 3.6rem;background-repeat: no-repeat;background-position: 0rem 0rem;background-size: 100%;background-image: url('https://img.alicdn.com/imgextra/i4/O1CN014kqXkX22y9iy5WhI6_!!6000000007188-2-tps-120-3720.png');}@keyframes lightningAnimate {0% { background-position: 0rem 0rem; }3.3% { background-position: 0rem calc(-1 * 3.6rem); }6.6% { background-position: 0rem calc(-2 * 3.6rem); }10% { background-position: 0rem calc(-3 * 3.6rem); }13.3% { background-position: 0rem calc(-4 * 3.6rem); }16.6% { background-position: 0rem calc(-5 * 3.6rem); }20% { background-position: 0rem calc(-6 * 3.6rem); }23.3% { background-position: 0rem calc(-7 * 3.6rem); }26.6% { background-position: 0rem calc(-8 * 3.6rem); }30% { background-position: 0rem calc(-9 * 3.6rem); }33.3% { background-position: 0rem calc(-10 * 3.6rem); }36.6% { background-position: 0rem calc(-11 * 3.6rem); }40% { background-position: 0rem calc(-12 * 3.6rem); }43.3% { background-position: 0rem calc(-13 * 3.6rem); }46.6% { background-position: 0rem calc(-14 * 3.6rem); }50% { background-position: 0rem calc(-15 * 3.6rem); }53.3% { background-position: 0rem calc(-16 * 3.6rem); }56.6% { background-position: 0rem calc(-17 * 3.6rem); }60% { background-position: 0rem calc(-18 * 3.6rem); }63.3% { background-position: 0rem calc(-19 * 3.6rem); }66.6% { background-position: 0rem calc(-20 * 3.6rem); }70% { background-position: 0rem calc(-21 * 3.6rem); }73.3% { background-position: 0rem calc(-22 * 3.6rem); }76.6% { background-position: 0rem calc(-23 * 3.6rem); }80% { background-position: 0rem calc(-24 * 3.6rem); }83.3% { background-position: 0rem calc(-25 * 3.6rem); }86.6% { background-position: 0rem calc(-26 * 3.6rem); }90% { background-position: 0rem calc(-27 * 3.6rem); }93.3% { background-position: 0rem calc(-28 * 3.6rem); }96.6% { background-position: 0rem calc(-29 * 3.6rem); }100% { background-position: 0rem calc(-30 * 3.6rem); }}
</style>
`
)
;
$('body'
).prepend(`
<div id='html-ding-loading-container'>
<div id='ding-loading'></div>
</div>
`
)
;
}
)
;
}
;
// 在umi中注入
plugins: [
'@umijs/plugins/dist/initial-state'
,
'@umijs/plugins/dist/model'
,
'./plugins/loading.ts'
,
]
,
实现效果:
3.2 session管理持久化
系统中在前端资源全部response解析完成后,对所有的业务接口请求执行前都需要确保getUserInfo接口响应成功并在前端接收sessionId,然后在所有的业务接口中携带在参数中,在系统交互链路的前置流程过长的背景下,前端基于storage实现getUserInfo数据持久化从而节省一次关键串行接口的请求。
关键用户信息读取的代码:
import getCurrentUserInfo$ from '@ali/dingtalk-jsapi/api/internal/user/getCurrentUserInfo'
;
export
async
function fetchUserInfo(
) {
const dingUid =
await getCurrentUserInfo(
)
;
let storageUserInfo = getUser(
)
;
let res: UserDto;
if (storageUserInfo &&
+dingUid?.uid === +storageUserInfo?.dingUserId) {
// 如果缓存中的用户信息是当前用户,使用缓存
res = {
userType: 'dingtalkUid'
,
userId: storageUserInfo.dingUserId,
userName: storageUserInfo.nick,
name: storageUserInfo.nick,
mobile: storageUserInfo.mobile,
avatarUrl: storageUserInfo.avatarUrl,
}
;
window.enjoyDrinkTrace.logError('命中storageUserInfo缓存'
)
;
}
else {
// 未命中缓存,走请求用户信息流程
const corpId = getQueryString('corpId'
)
;
const userInfo =
await getUserInfo({
corpId,
userChannel: getQueryString('__from__'
) || ''
,
}
)
;
res = {
userType: 'dingtalkUid'
,
userId: userInfo.data.data?.userID,
userName: userInfo.data.data?.userName,
name: userInfo.data.data?.userName,
mobile: userInfo.data.data?.mobile,
avatarUrl: userInfo.data.data?.avatarUrl,
}
;
}
return res;
}
这一步优化在FP节点之后,减少了与FCP中间的耗时,减少量为一次接口请求的时间,约100ms。
四、做好基本的,再借助一下端能力
4.1 离线策略
做好前端基本的优化+H5加载链路的优化后结合cdn自带的缓存,整体的首屏用户体验已经很不错了。
那如native般的秒开,怎么实现?由于业务运行在钉钉中,咨询了钉钉同学,对于产品首页、红包页等页面布局不大的场景中尝试接入离线。
结合实际业务场景,在请客红包中,所有资源都可根据离线预置到App本地,在用户访问页面时,可以尽早为页面渲染铺垫;此外还可以推送相应的 js 缓存文件,减少 js 下载时长,让用户可交互时间提前;页面中的固定图片,也可以通过 zcache 缓存,提升页面图片整体的缓存命中率。
结合了所有的优化后,请客红包的IM消息主入口基本做到秒开。
五、未来规划
结合各类性能优化的手段,沉淀出相对应的代码、文档、prompt、tools等,集成到agent中,在未来的相关新产品设计中,让业务在起步阶段就有相对应稳定、体验较好的体感。
基于ARMS性能插件、钉钉容器性能监控看板,持续提升业务性能,保障业务用户体验。
对于场景投放类页面(目前是MPA多页方案),后续考虑转SSR