WG包网前端拆解之Image组件

作为同样的包网从业者，WG包网作为行业翘楚，势必有很多值得我们学习的地方。

股东们都希望达到WG包网这样的体验，我们叫外包方式去仿照，但是效果非常不理想。

不入虎穴焉得虎子，那么今天我们来拆解看看WG包网的最底层组件-Image组件，到底有哪些功能。

总结

很多非技术的估计看不懂下面的文章，那我直接上总结。

流量节省，很多公司都不一定用上了AVIF格式的图片。但是WG用上了，而且他推测你用不上AVIF还会给你用WEBP，最后才是PNG，也就是一个图片文件，WG会存三种格式。那么这样的优势是什么呢？也就是同样的网络，WG的比你加载快1倍。

这就像是你好色，但是身高不行，大洋马吃不消，好我给你推日韩货，再不行我再给你推越南货，总有一个适合你。让你舒舒服服。

再比如你看不到的它就不加载了，优先加载你能看到的，保证整个网站的流畅性。

还有CDN挂掉了怎么解决？普通网站是赶紧换，WG是直接上多个地址，而且是不同服务商（阿里云、AWS），无缝回退，保证你最终都能加载到图片文件。

还有太多太多的细节了，他很好的解决了我们之前做网站行业所遇到的几个问题：

图片动画怎么解决？
都知道 AVIF 格式图片相比JPG、PNG少50%以上，怎么才能再支持 AVIF 设备上启用AVIF 或者 Webp 呢？
如果图片CDN域名无法连接，怎么解决？
用户看不到的图片需要加载吗？
同一个站点如何实现不同租赁客户的图片替换？

说实话这是我见过优化到缝里的前端代码，真的是有钱能使鬼推磨！下面来细节分析一下。

组件属性定义

属性名	类型	默认值	说明
isApng	Boolean	null	是否为APNG格式图片
src	String	必填	图像的源URL地址，必填项
normalizeSrcForWatch	Function, String	–	用于监听时规范化src的函数或字符串
thumbSrc	String	ku	缩略图源地址
placeholderSrc	String	ku	占位图源地址
errorSrc	String	–	加载错误时显示的图片源地址
width	String	–	图片宽度
height	String	–	图片高度
lazy	Boolean	true	是否启用懒加载
useSkeleton	Boolean	–	是否使用骨架屏
canvasMode	Boolean, Object	–	是否使用Canvas模式渲染，可以是布尔值或配置对象
replaceExtension	Boolean, Array	true	是否替换扩展名，可以是布尔值或数组
performance	Boolean	false	是否启用性能优化模式
showBlurAnimation	Boolean	false	是否显示模糊动画效果
tag	String	“img”	渲染的HTML标签
color	String	–	SVG的颜色
svgGo	Boolean	true	是否启用SVG模式
svgLinearGradientConfig	Object	{angle: 180, colorStop: []}	SVG线性渐变配置
svgColorMode	String	“fill”	SVG颜色模式
svgInheritSize	Boolean	–	SVG是否继承父元素尺寸
transformSize2Rem	Boolean	false	是否将尺寸转换为rem单位

组件代码逻辑

一、核心功能全景

多源加载体系

四级容错机制：主图 → 缩略图 → 占位图 → 错误图的递进式加载策略

智能预加载：根据lazy配置自动选择立即加载或延迟加载

格式自适应：支持APNG动态图、WebP/AVIF新格式、SVG矢量图的自动识别

渲染引擎矩阵

渲染模式	适用场景	技术实现
img	常规静态图片	原生img标签加载
canvas	APNG动态图/性能优化需求	APNG.js库解析渲染
svg	矢量图标/渐变效果	封装Icon组件动态注入SVG代码
背景图模式	非标准图片展示	CSS background-image实现

状态机管理

stateDiagram-v2
    [*] --> Wait: 初始化
    Wait --> Placeholder: 检测到placeholderSrc
    Placeholder --> Loading: 进入可视区域
    Loading --> LoadingAndSet: 简单图片模式激活
    Loading --> Success: 主图加载成功
    Loading --> Error: 所有加载失败
    LoadingAndSet --> Success: 最终加载完成
    Error --> Success: 重试成功

二、核心逻辑流

1. 初始化阶段

环境检测：通过Je()判断运行环境(iOS/Android/浏览器类型)

URL解析：使用gm()进行深度URL分析，分离域名/路径/扩展名

缓存预热：检查cf缓存系统是否存在历史缓存记录

2. 加载决策树

function loadDecision() {
  if (缓存命中 && 非SVG) {
    直接使用缓存
  } else if (懒加载激活) {
    注册IntersectionObserver监听
  } else {
    立即启动加载流程
  }

  if (APNG格式) {
    启动WebWorker解析
    创建离屏Canvas
    配置帧动画控制
  } else if (WebP/AVIF) {
    特征检测 → 格式回退
  }
}

3. 复合加载流程

占位图抢占式加载：优先保证布局稳定

缩略图预加载：200ms内完成小图加载

主图渐进加载：大图采用分片加载策略

错误兜底机制：三级重试(域名切换/格式回退/尺寸降级)

三、高阶特性解析

1. 性能优化体系

SWR缓存策略：Stale-While-Revalidate模式管理图片缓存

DOM回收机制：对不可见图片进行内存回收

请求优先级控制：通过priority属性实现HTTP/2优先级

尺寸自适应：transformSize2Rem 实现REM单位动态转换

2. 异常监控系统

const errorReport = (error) => {
  ne.doReport({
    rule: ne.rules.SENSOR_BURIED,
    eventName: ne.sensorEvents.ImageFirstLoadErrorWhenSimpleImageMode,
    payload: {
      ImageOnFirstLoadUrl: error.url,
      Environment: Je().browserInfo
    }
  });

  if(error.type === 'APNG_PARSE_ERROR'){
    performance.mark('apng_fail');
  }
}

3. 动态资源管理

域名故障转移：pA函数实现多CDN自动切换

格式自动降级：WebP → PNG → JPG的自动回退链

像素密度适配：根据devicePixelRatio加载2x/3x图

四、设计哲学

1. 分层架构设计

层级	职责	关键技术
接口层	Props/Events定义	Vue Composition API
控制层	加载策略/状态管理	有限状态机
适配层	格式转换/环境适配	Canvas 2D/APNG.js
基础设施层	缓存/网络/异常监控	IndexedDB/Service Worker

2. 可观测性设计

性能埋点：TTFB(Time To First Byte)监控

资源画像：记录图片尺寸/格式/加载耗时

缓存命中率：统计各级缓存使用情况

3. 弹性设计原则

降级开关：performance模式一键关闭复杂功能

阈值配置：通过zC常量控制REM转换基准值

渐进增强：根据设备能力动态启用高级特性

破解项目地址

总结