I have set of common components and their clientlibs. They are to be re-used in multiple sub-sites which will have their own specific components and libraries.
How can I load site specific clientlibs using editable template?
I also had a similar requirement like this where a specific editable template requires a specific set of JavaScript and CSS. For example, we had a client library that should only be enabled for our store location pages, and also another client library that should be enabled for our store book pages. You can visualise that all store location pages use a single editable template, while the store book pages use a separate single editable template.
If you utilise the WCM Core Components V2 Page, as your websites base page during the creation of the editable templates, you can utilise the editable template's Page Policies to set specific client libraries for different templates; it's that simple. You can define specific client libraries directly from the Touch UI editable template page editor.
Here are steps for how you can include a custom client library for your editable template (let's use we.retail example project):
From the Touch UI editor, click on the drop-down button from the left top main nav, and select on Page Policy; you are presented with the Page Policies configuration page. screenshot illustrated below:
Next, add your client library category directly into the client-side libraries multi-field, and save. screenshot illustrated below:
Done.
Going live: Publish the editable template with your changes.
Going live: Flush the cache, if your website is sitting behind a dispatcher.
Going live: Flush the CDN cache, if your website is sitting behind a CDN.
Like @raj_mandalapu suggested you can make commonly loaded component as single group and you can load it as a part of page rendering component itself if you need to avoid the config on template level.
Each site specific clientlib you can add it in template config