Shopify 将 Checkout Blocks 升级为 Polaris Web 组件，包体积最高缩减 85%

作者：Daniel Curtis

Shopify 将 Checkout Blocks 五个高流量结账 UI 扩展从 React + Remote UI 迁移至 Preact + Polaris Web Components + remote-dom，强制升级至 API 版本 2026-01，2026 年 10 月起旧版本将被拒收。

包体积下降 40%–85%，中位加载时间降 8%；Preact 替换 React 节省 89KB；自研 droplet Liquid 解析器替代 liquidjs，经 4.2 万行真实语料验证兼容性。

适合前端架构师、Shopify 应用开发者、UI 组件平台工程师阅读。

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/

促进软件开发及相关领域知识与创新的传播

关于我们 我要投稿 合作伙伴 加入我们 关注我们

联系我们 内容投稿：editors@geekbang.com 业务合作：hezuo@geekbang.com 反馈投诉：feedback@geekbang.com 加入我们：zhaopin@geekbang.com 联系电话：010-64738142 地址：北京市朝阳区望京北路9号2幢7层A701

InfoQ 近期会议 上海 · QCon 全球软件开发大会 2026.10.22-24 北京 · AICon 全球人工智能开发与应用大会 2026.12.18-19

全球 InfoQ InfoQ En InfoQ Jp InfoQ Fr InfoQ Br

Copyright © 2026, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5 京公网安备 11010502039052号 | 产品资质