Shopify Upgrades Checkout Blocks to Polaris Web Components, Cutting Bundle Sizes up to 85%
TL;DR · AI 摘要
Shopify通过迁移到Preact和Polaris Web组件，将Checkout Blocks捆绑包体积减少85%，并强制要求使用2026-01版本API。
核心要点
- 迁移后支付图标扩展体积缩小84.4%，达到64KB gzip限制
- Preact替代React节省89KB体积，Liquid解析器体积减少至13KB
- 2026年1月起强制要求使用2026-01版本API
结构提纲
按章节快速跳转。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- Shopify组件迁移
- 迁移策略
- Preact替代React
- Web组件标准化
- 性能提升
- 85%体积缩减
- 加载时间下降8%
- 实施细节
- 64KB gzip限制
- 强制API版本
金句 / Highlights
值得收藏与分享的关键句。
支付图标扩展体积从112KB降至17.6KB，降幅达84.4%
Preact替代React直接节省89KB体积，无需额外优化
2026-01版本强制要求所有扩展必须使用新API，旧版本部署将被阻止
Shopify 将结账模块升级为 Polaris Web Components，减少捆绑包大小高达 85% - InfoQ
InfoQ 首页 News Shopify 将结账模块升级为 Polaris Web Components，减少捆绑包大小高达 85%
Web 开发
InfoQ 认证 AI 辅助工程计划（在线，10 月 19 日）：构建支撑 harness 的装置。
Shopify 将结账模块升级为 Polaris Web Components，减少捆绑包大小高达 85%
2026 年 10 月 9 日 2 分钟阅读
作者
- Daniel Curtis
#### 关注我们
YouTube
232K 粉丝
26K 粉丝
新
RSS
19K 读者
X
57.1k 粉丝
21K 喜欢
Bluesky
收听本文 -
0:00
音频准备播放
您的浏览器不支持音频元素。
正常
1.25x
1.5x
喜欢
新下拉阅读列表
- 阅读列表
Shopify 详细介绍了其如何重建结账模块应用，将五个高流量的结账 UI 扩展从 React 和遗留的 Remote UI 桥接器迁移至 remote-dom，使用 Preact 和 Polaris Web Components。这些扩展在约三分之一的定制结账中渲染，已用 TypeScript 重写，并从 API 版本 2025-07 迁移至 2026-01，这是将 Shopify 整个 UI 扩展表面迁移至框架无关组件的更广泛努力的一部分。此次变更并非可选：自 2026 年 10 月 1 日起，如果应用部署包含早于 2026-01 的扩展版本，将被阻止部署。
扩展家族的传输捆绑包大小减少了 40% 至 85%，其中支付图标扩展减少了 84.4%。扩展加载时间在中位数下降约 8%，在 90 分位数下降约 7%，按结账量加权计算。这很大程度上得益于 2026-01 remote-dom CLI 对每个扩展实施的硬性 64KB gzip 预算，此前捆绑包大小约为 100KB 至 112KB gzip。
从 React 切换到 Preact 去除了 react-reconciler，仅此一项就节省了约 89KB。团队用自研的 Liquid 解析器（昵称“droplet”，gzip 后 13KB）替换了 liquidjs（约 73KB），该解析器针对从真实商户配置中提取的 42,000 行一致性语料库进行了验证。dayjs 被替换为小型自定义日期工具，而 markdown-to-jsx 保留并映射到 Preact 而非替换。
对于开始自己迁移的开发者，Shopify 指向其升级指南和 AI 工具包，并已发布结账和客户账户扩展的迁移指南。实际上，大多数遗留的 Polaris React 元素将变为框架无关的 s-* 自定义元素，从 Shopify 的 CDN 加载。
更广泛的转向 Preact 和框架无关的 Web Components 首次在 2025 年底发布的 API 2025-10 中落地，早期反响总体积极。开发平台 Gadget 将这一方向称为“重大更新”，指出 Preact 以远低于 React 的运行时成本提供了类似 React 的体验。在 Hacker News 上，开发者们欢迎 Shopify 在不使用 Shadow DOM 的情况下发布组件，但也有开发者提醒称 Web Components“并非万能药”，不会取代框架组件系统。
一年后，随着2026-01版本成为强制升级路径，社区的反馈变得更加分化：2026年4月，一位开发者在Shopify论坛上指出，向用户分发未版本化的CDN脚本且无法锁定版本的做法"对稳定性来说是噩梦"，这一抱怨在2026年中期仍在社区持续存在。同时，Reddit的一个讨论线程批评新组件"功能不完整"，并指出存在诸如缺少Polaris React提供的索引表格等缺陷。
Shopify是一个为数百万在线商店提供支持的电商平台，Checkout Blocks是其众多无需编写代码即可自定义结账体验的应用之一。Polaris是Shopify的开源设计系统，其较新的Web组件是与框架无关的自定义元素，无论开发者使用何种框架，都能渲染出一致的用户界面。
作者信息主容器
关于作者
章节标题
每位作者信息主容器
#### Daniel Curtis
显示更多
显示更少
#### 本内容属于Web开发主题
##### 相关主题：
- 开发
- 优化
- Web组件
- Web开发
- React
- 相关编辑内容
- 相关赞助商 《实用智能体编码实践手册》
- 相关赞助商 批量自动化代码转换。修复漏洞、迁移框架、现代化改造遗留代码。免费试用Moderne
InfoQ新闻简报
每周五汇总InfoQ最新内容，每周二发送。加入25万+资深开发者的社区。查看示例
我们保护您的隐私。 /think