jsp - Adobe CQ/AEM Client Lib channel 属性与 cq :includeClientLib tag 交互

Question

我正在努力提高 adobe cq 中的页面性能，我看到各种网站(1、2)都提到了 channels 类型节点的 cq 属性:客户端库文件夹

我设置了一个包含 2 个组件(cmpA 和 cmpB)的小示例。两者的 categories 值为 cmps.cmp 并且位于 apps 目录中。然后，我在 etc 文件夹中创建了另一个类型为 cq:ClientLibraryFolder 的节点，该节点的嵌入属性为 cmps.cmp 和值为 cmps.all

的类别属性

在我看来，我有以下结果，它们从各自的客户端 lib 文件夹中的两个组件 css 生成了一个串联的 css 文件。

<cq:includeClientLib css="cmps.all" />

当我将 !touch 添加为 cmpB 的 channels 属性时，然后将 chrome 中的 userAgent 覆盖到 iPhone ，cmpB 的 css 仍然是串联的。

1. localhost:4502/libs/cq/ui/content/dumplibs.html 验证 channel 属性设置为 !touch
2. 我已通过在 etc/clientlibs/foundation/librarymanager/DefaultChannelDetector.js 中添加一个 console.log 来确认当前 channel 是 touch
3. 在 url 中加载 clientlibs.css 时添加 ?debug=true 确认包含来自两个 clientlibs 的 css

我想使用 channels 属性在给定特定用例的情况下逐步淘汰某些 css(最终是 js)文件，同时不要像文档含糊地建议的那样使用额外的逻辑使标记过于复杂。我的目标是我的最终结果是一个单一的 css 文件(通过配置管理器(服务器/系统/控制台/configMgr)中的 Day CQ HTML 库管理器缩小和 gzip 压缩)。

我是否错误地使用了 channels 属性？它甚至意味着以我使用它的方式使用吗？任何见解将不胜感激。

Answer 1

必须在 clientlib 节点上设置 channels 属性。如果您想要特定 channel 的特殊 css/js，您需要至少创建 2 个 clientlibs:

1. 第一个 clientlib 将有 categories=[cmps.all]
2. 第二个 clientlib 将有 categories=[cmps.all] 和 channels=[!touch]

第一个总是为 cmps.all 加载，而第二个只会为非触摸 channel 加载。