组件级A/B测试需实现稳定分流、动态加载、统一开关和配套观测：以用户标识哈希固化分组，按变体名动态导入模块，通过上下文驱动渲染，并自动埋点与安全降级。
实现组件级 A/B 测试，核心不是替换整页，而是让同一组件在不同用户面前呈现不同逻辑分支，同时保证分流稳定、状态可溯、开关可控。动态加载在此过程中承担“按需拉取变体”的角色，而非简单地 import() 两个文件——它要配合身份锚定、缓存策略与降级机制，构成可落地的架构闭环。
一、分流必须稳定：用哈希+本地快照固化用户分组
每次刷新都重新随机，会导致用户在表单中途看到另一版本、埋点错乱、后端校验失败。正确做法是：
- 以用户唯一标识（如登录 ID、设备指纹或访客 ID）与实验名拼接，做一致性哈希（如 SHA-256），再对 1000 取模，得到稳定 bucket 值
- 根据预设流量比例（如 A:40%、B:60%）划分区间，确定该用户所属变体
- 首次计算后立即写入 localStorage 或 MMKV，并设置合理过期时间（如 7 天）；后续加载优先读快照，避免重复请求
- 鸿蒙或离线场景下，test_track 类框架会自动维护本地特性镜像，断网时仍能执行决策
二、组件加载走动态路径：按变体名加载对应模块
不把 A/B 逻辑硬编码在组件内部，而是让父容器决定“加载哪个变体”：
- 定义规范命名规则，如
ButtonV2.A.js、ButtonV2.B.js或button/variant-a.tsx - 使用
import(`./components/button/${variant}.tsx`)动态导入（注意 Webpack/Vite 需配置魔法注释支持 code-splitting） - 配合 SystemJS 或 test_track 的模块注册机制，可实现运行时热插拔：A 版本出问题时，服务端将配置中
ButtonV2的 B 流量调至 100%，前端下次加载自动切过去 - 构建时也可用 DefinePlugin 注入
process.env.BUTTON_V2_ENABLED = false，直接 Tree-shaking 掉整个实验模块
三、功能开关统一收口：上下文 + 状态管理驱动渲染
组件本身不感知 AB，只接收“当前启用哪一版”的信号：
- 在根组件或 Layout 中初始化 AB 上下文（Yew 用
use_state/ React 用useContext/ SwiftUI 用@AppStorage） - 上下文内封装
getVariant('button_v2')方法，返回 'A'、'B' 或 null（未启用） - 业务组件通过 hook 或属性获取变体值，再决定是否渲染、如何渲染：
— 若返回 'B'，则import('./ButtonV2.B').then(mod => <mod.default />)
— 若返回 null，降级为默认 Button 组件，且不触发任何实验埋点 - IceCubesApp 的 Toggle 开关直接暴露在设置页，本质也是将功能开关从“后端配置”下沉为“用户主动选择”，适合隐私敏感或强控制诉求场景
四、配套能力不可少：埋点自动带上下文、异常安全降级
没有数据归因的 A/B 是盲测。动态加载架构必须自带可观测性：
- AB 模块在确认变体后，自动上报
ab.expose事件，含实验名、变体、用户 Hash、设备类型、时间戳 - 后续所有关键行为（点击、提交、曝光）自动携带当前实验上下文，无需业务手动传参
- 当哈希失败、配置加载超时、模块加载报错（如 404）、或网络中断时，一律 fallback 到默认分支，并打标
fallback_reason: "network_timeout" - Flutter 的 test_track、Kotlin/Native 的 MMKV 存储引擎、Yew 的上下文 MessageProvider，都在解决同一个问题：让降级有据可查、可回溯、可统计
