负责任的条件加载 | CSS-Tricks

在 Polypane 博客上（没有署名，但可能是 Kilian Valkhof (没错))，有一篇很棒的文章，使用 prefers-reduced-data 创建网站，关于 prefers-reduced-data 媒体查询。目前还没有浏览器支持，但最终您可以在 CSS 中使用它来做出减少数据使用量的选择。从文章中，这里有一个例子，只有在用户没有表示偏好低数据使用时才会加载网络字体

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

这是一个不错的模式。它与无障碍和 prefers-reduced-motion 媒体查询的精神相同。你也可以从 JavaScript 中使用它们。

同样的能量：Umar Hansa 最近的博客文章 JavaScript：条件 JavaScript，仅在需要时下载。这里有很多例子，但关键是 navigator 对象包含有关设备、互联网连接和用户偏好的信息，因此您可以将它与 ES 模块结合使用，在不编写太多代码的情况下有条件地加载资源

if (navigator.connection.saveData === false) {
    await import('./costly-module.js');
}

如果您喜欢这个想法，您可能会深入了解 Jeremy Wagner 的系列文章从这里开始，关于负责任的 JavaScript。

评论