Shopify 详细介绍了其 Checkout Blocks 应用的重构过程，将五个高流量的结账 UI 扩展从 React 和旧的 Remote UI 桥接迁移到了基于 Preact 和 Polaris Web Components 的 remote-dom。这些扩展渲染了大约三分之一的定制结账页面，现已使用 TypeScript 重写，并将 API 版本从 2025-07 升级至 2026-01，这是 Shopify 把全部 UI 扩展体系迁移至与框架无关的组件的计划的一部分。本次变更不是可选的：从 2026 年 10 月 1 日起，如果应用部署包含早于 2026-01 的扩展版本，将被阻止。
所有扩展的传输包体积下降幅度在 40% 至 85% 之间，其中 payment-icons 扩展缩减了 84.4%。扩展加载时间中位数下降了约 8%，90 百分位值下降了 7%，并按结账量加权。这在很大程度上归功于 2026-01 remote-dom CLI 强制规定每个扩展压缩后包体积上限为 64KB，而此前的包大小约为 100KB 到 112KB。
从 React 切换到 Preact，移除了 react-reconciler，仅这一项就节省了约 89KB。团队用内部代号为 “droplet” 的 Liquid 解析器（压缩后 13KB）替换了 liquidjs（约 73KB），并基于来自真实商家配置的 42000 行对照语料完成兼容性校验。dayjs 被一个小的自定义日期工具替换，而 markdown-to-jsx 予以保留，做了 Preact 别名映射而非替换。
针对需要自行迁移的开发者，Shopify 提供升级指南和 AI 工具包，并发布了 Checkout 和 Customer Account 扩展的迁移指南。在实际迁移中，大部分旧版 Polaris React 组件会转为与框架无关、由 Shopify CDN 加载的 s-* 自定义元素。
转向 Preact 和框架无关 Web Components 的方案首次出现在 2025 年底的 API 2025-10 版本中，早期反馈整体偏正面。开发平台 Gadget 称这一转变是“很棒的更新”，指出 Preact 以极小的运行时提供了类似 React 的体验。在 Hacker News 上，开发者们也认可 Shopify 交付的组件不使用 Shadow DOM，尽管也有人告诫说 Web Components “并非灵丹妙药”，不会取代框架组件系统。
时隔一年，2026-01 版本成为强制标准后，各方评价变得褒贬不一：2026 年 4 月，有开发者在 Shopify 论坛提出，交付一个无法固定版本的 CDN 脚本“对稳定性来说是一场噩梦”，该诉求在 2026 年年中仍在社区中持续讨论。一个 Reddit 帖子指责新组件“不完整”，列举了诸如缺少 Polaris React 提供的 Index Table 等组件。
Shopify 是一个为数百万在线商店提供支持的商务平台，Checkout Blocks 是其用于无代码定制结账流程的应用之一。Polaris 是 Shopify 的开源设计系统，其新版的 Web Components 是与框架无关的自定义元素，无论开发者使用何种框架，都能渲染相同的 UI。
查看英文原文：https://www.infoq.com/news/2026/10/shopify-web-components/
