Search code examples
jspadobeaem

Adobe CQ / AEM Client Lib channel property interaction with cq:includeClientLib tag

I am working on improving page performance in adobe cq and I've seen various sites(1, 2) which mention the channels property for nodes of type cq:ClientLibraryFolder

I've set up a small example with 2 components (cmpA and cmpB). Both have a categories value of cmps.cmp and are in the apps directory. I then created another node of type cq:ClientLibraryFolder in the etc folder that has an embed property of cmps.cmp and a categories property with value cmps.all

In my view, I have the following which results in a concatenated css file from both the components css in their respective client lib folder.

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

When I add !touch as the channels property of cmpB then override the userAgent in chrome to iPhone, the css for cmpB is still concatenated.

  1. localhost:4502/libs/cq/ui/content/dumplibs.html verifies the channels property is set to !touch
  2. I've confirmed the current channel is touch by adding a console.log inside of etc/clientlibs/foundation/librarymanager/DefaultChannelDetector.js
  3. Adding ?debug=true while loading the clientlibs.css in the url confirms the css from both clientlibs is included

I'd like to use the channels property to phase out certain css (and eventually js) files given certain use cases, while not overcomplicating the markup with extra logic as the documentation vaguely suggests. I aim for my end result to be a single css file (minified and gzipped via the Day CQ HTML Library Manager in the Config Manager(server/system/console/configMgr).

Am I using the channels property incorrectly? Is it even meant to be used in the way that I'm using it? Any insights would be greatly appreciated.

Solution

  • the channels property has to be set on the clientlib node. if you wanted special css/js for a particular channel, you would need to create at least 2 clientlibs:

    1. first clientlib would have categories=[cmps.all]
    2. second clientlib would have categories=[cmps.all] and channels=[!touch]

    the first one would always load for cmps.all while the second would only load for non-touch channels.