Search code examples
aemclient-library

Merge JS files into one Adobe AEM

I have the following code to pull in two different categories but this outputs 6 separate files and I would like the output to be just one. How can this be done in AEM 6.0?

<clientlib data-sly-call="${clientLib.js @ categories=['cq.foundation-main','cq.shared']}" data-sly-unwrap />

Thanks

Solution

  • In AEM, a category include will merge and compress all the files into a single js (or css) include. This is done per category include.

    If you want to merge multiple categories, you should consider using the embed option in categories dependencies. How this works is:

    1. Create a new category (for e.g. cq-embed)
    2. Define embed dependencies ('cq.foundation-main','cq.shared') for the new category you have created.
    3. Reference your new category.

    You can also use this tool from ACS to optimise the includes:

    https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html

    It allows you to create the embed categories and reference them in a much cleaner way.