Merging the client context related 6 js requests into a single request

When you include clientcontext component into your application, it will include 6 JS requests individually and will have impact on the page performance. The clientlibs documentation says that you can merge that into a single request but doesn’t talk about the exact clientlib dependencies in order to merge those 6 requests into one.

Below are the files which gets called when you include the client context component:

<script type=”text/javascript” src=”/etc/clientlibs/granite/jquery.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/granite/utils.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/granite/jquery/granite.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/foundation/jquery.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/foundation/shared.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/granite/underscore.js”></script>

<script type=”text/javascript” src=”/etc/clientlibs/foundation/personalization/kernel.js”></script>

In order to merge the above js files into one, you need to follow the below steps:

• Create a clientlibs under “/etc/clientlibs”. ( it can be created under any folder, but just to keep the location consistent, I’m creating it under /etc/clientlibs)
• Add a categories property and give it some name (let’s say “customclientcontextlibs“)
• Add ’embed’ property of type String[] and add the below values: (order should be followed)

1. jquery
2. granite.utils
3. granite.jquery
4. cq.jquery
5. granite.shared
6. cq.shared
7. underscore
8. personalization.core.kernel
9. personalization.clientcontext.kernel
10. personalization.stores.kernel

Once creation of client libs is done, overlay the “/libs/cq/personalization/components/clientcontext” component into apps (“/apps/cq/personalization/component/clientcontext”) and include the newly created clientlib (customclientcontextlibs) instead of “personalization.kernel”.

Before :  <cq:includeClientLib categories=”personalization.kernel”/>

After :    <cq:includeClientLib categories=”customclientcontextlibs“/>

That’s it! Now your application will have only one requests when the clientcontext component is included.

<script type=”text/javascript” src=”/etc/clientlibs/customclientcontextlibs.js“></script>