Shopify 平台
了解 Shopify 提供的基础设施，让你的在线商店和主题加载更快。
Shopify CDN
Shopify 为商家提供了由 Cloudflare 支持的世界级内容分发网络（CDN）。使用 CDN 意味着你的在线商店在全球范围内都能快速加载。
通过 Shopify CDN 传输的文件会自动进行压缩和压缩优化，使用的是 Brotli 和 gzip，可以减小浏览器需要下载的文件大小。请求使用的是 HTTP/3 和 TLS 1.3，进一步提升了请求性能和安全性。
大多数资源的 URL 使用的是 cdn.shopify.com 域名。在某些情况下，比如在店面上加载的图片或样式表，资源会通过店铺域名加载，格式为 {shop}.myshopify.com/cdn。这样做是为了通过最大化浏览器的连接复用来提升性能。
商店图片的短暂延迟
使用 CDN 意味着你在线商店的所有图片会缓存到全球成千上万台服务器上。当你修改图片时，Shopify 会通知 CDN 图片已经更新。为此，Shopify 使用 asset_url 过滤器，它会自动给所有生成的 URL 添加版本号。例如，加在 URL 末尾的版本号可能长这样：?v=1384022871。
如果你在链接图片时没有使用 asset_url 过滤器，而是直接链接图片地址，那么即使你上传了新版图片，商店上显示的图片可能在一天或更久之后才会更新。
确保图片自动更新的 CSS 写法
如果你在 CSS 中直接引用图片，那么 URL 是固定的，不会包含 Shopify 自动更新的资源版本号。
为了确保图片可以自动更新，请修改 CSS 写法，加入 asset_url 过滤器。
例如，如果你的 CSS 写成这样：
background: url(bg.gif);
那就改成这样：
background: url({{ 'bg.gif' | asset_url }});
服务端渲染
Storefront Renderer（简称 SFR）是一个服务端渲染器，用来处理店面请求。SFR 专门为尽可能快速地响应店面请求而设计。
这个渲染器可以显著提升缓存未命中时的性能 —— 也就是当页面或其他请求的数据不在缓存中，需要从其他缓存层级或主存中读取时的情况。
压缩优化（Minification）
当 CSS 文件或符合 ES5 语法的 JavaScript 文件被店面请求时，Shopify 会自动进行压缩优化。压缩后的 JavaScript 和 CSS 文件会被缓存，直到文件被更新。
压缩优化可以让浏览器下载更少的数据，从而加快页面加载速度。
如果满足以下任一条件，Shopify 会提供 JavaScript 或 CSS 文件的原始版本：
- 压缩后的文件比原始文件还大。比如原始文件已经用更高效的方式压缩过。
- 文件扩展名是
.min.js或.min.css。
小贴士
压缩优化可能会移除代码中的调试语句。如果你需要调试代码，可以临时把文件扩展名改成 .min.js 或 .min.css。
Polyfill 兼容库
Shopify 会在需要时自动在店面中引入 es-module-shims polyfill 库。这个库用于增强现代 JavaScript 模块功能，特别是 import maps，以在不同浏览器之间实现更好的兼容性。
Import maps 是 Web 平台的一个标准功能，让开发者可以像服务端包管理器一样控制 JavaScript 模块的解析方式。虽然主流浏览器的最新版都支持 import maps，但一些旧版本浏览器可能不支持这个特性或其他模块功能，比如 同一个文档中使用多个 import map。
在你的主题代码中，你可以放心使用 <script type="importmap"> 标签和标准的 <script type="module"> 标签，而不需要自己处理模块加载的浏览器兼容问题。Shopify 会自动引入并维护这个 polyfill，只要买家使用的浏览器版本还需要它，它就会被继续支持。
小贴士
如果可以的话，尽量使用 Shopify 平台提供的 polyfill 来实现 import map 功能。不要另外加载 es-module-shims 或类似的 polyfill，否则可能会导致冲突或增加不必要的负担。
若有收获，就点个赞吧
0 人点赞
