Dynamically add client libraries to editable template

ssharma48

06-04-2019

Hi,

Based on the components configured on the editable template by template authors, can we add / remove individual component client library in the template policy accordingly (using Event Listener).

Also is there any limit on the client lib count.

Regards,

Shikha

Accepted Solutions (1)

Accepted Solutions (1)

Jörg_Hoh

Employee

07-04-2019

The only way I can think of is to provide a clientlib per component and let every component include its own clientlib. Which would result in lots of clientlibs. An optimization would be to combine the JS/CSS code of many components into a single clientlib and reference it from all of these components. This would give you still some overhead, but reduce the amount of files loaded.

Although, with HTTP/2 the overhead of loading lots of individual files compared to a smaller number of larger files is non-existent.

Answers (3)

Answers (3)

ssharma48

06-04-2019

Yes add or remove. So instead of using below code snippet in customheaderlibs.html which will main.css that contains styling for all components.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

    <sly data-sly-call="${clientlib.css @ categories='demo.main'}"/>

</sly>

Instead , I want to add component level clientlibs using template policies as below by this on specific page load instead of loading complete clientlibs I can only get client lib for the component which are specified on the particular template.

1728169_pastedImage_0.png

Regards,

Shikha

Jörg_Hoh

Employee

06-04-2019

Do I understand you correctly, that you want to remove clientlib imports on a template level which come with components added by an author to the page?

There is no real hard limit for the number of clientlibs.