I was referring to adobe blog and as per standard guidelines, we need to embed all component specific clientlibs in /etc/design/app/clientlibs. Once done, all clientlibs will be consolidated into one call.
I have a question if we do this way, will AEM not call all clientlibs on page load and will that not affect performance on first page load? Of course, subsequent calls will be lighter?
Also is there any way where i can load authoring specific clientlibs only when author is creating/editing content or only on author mode?
I have a question if we do this way, will AEM not call all clientlibs on page load and will that not affect performance on first page load? Of course, subsequent calls will be lighter?
The purpose is to avoid multiple network calls to each individual libraries/JS that you have included in your code. With effective compression/minification the size is optimized.
To answer your question, there is a trade off but in long term its beneficial. With dispatcher and CDNs in place in most of the cases the first loads is the only bottleneck.
Also is there any way where i can load authoring specific clientlibs only when author is creating/editing content or only on author mode?
You can and should include authoring clientlibs on Authoring instances only, you can do this by placing an edit mode check prior to including authoring client libs.
Look at /libs/wcm/foundation/components/page/author.html it makes a check for edit mode for including edit/authoring libraries -
<sly data-sly-use.wcmInit="initwcm.js"
data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
data-sly-test="${!wcmInit.wcmmode.disabled && wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.all @ categories='cq.authoring.page'}" />
<sly data-sly-test="${!wcmInit.wcmmode.disabled && !wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.all @ categories='cq.wcm.edit'}" />