Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to remove unwanted js

Avatar

Level 4

Hi Team, 

 

Currently I am doing site optimisation, can you please help to remove these below js on aem publish instance. which are duplicate like jquery.ui.js etc. 

 

<script src="/etc.clientlibs/clientlibs/granite/jquery.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/utils.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/jquery/granite.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/coralui2keys.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/typekit.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/moment.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/coralui3.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/coralui2.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/coralui2/optional/imageeditor.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/history.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/lawnchair.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/uritemplate.min.js"></script>
<script src="/etc.clientlibs/granite/ui/components/coral/foundation/components/clientlibs/components.min.js"></script>
<script src="/etc.clientlibs/granite/ui/components/coral/foundation/clientlibs/foundation.min.js"></script>
<script src="/etc.clientlibs/clientlibs/granite/jquery/animation.min.js"></script>
<script src="/etc.clientlibs/granite/ui/clientlibs/quickactions.min.js"></script>
<script src="/etc.clientlibs/granite/ui/components/endor/clientlibs.min.js"></script>
<script src="/etc.clientlibs/granite/ui/components/foundation/clientlibs/foundation.min.js"></script>
<script src="/etc.clientlibs/foundation/clientlibs/jquery.min.js"></script>
<script src="/etc.clientlibs/foundation/clientlibs/shared.min.js"></script>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@bhagchand 

  1. Identify Unused Clientlibs: Start by identifying clientlibs that are not used in any components or pages. AEM provides a tool called "Client Libraries Optimization" that can help you analyze the usage of clientlibs. It generates a report indicating which clientlibs are not being referenced. Review this report to identify the unused clientlibs. https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html  

  2. Analyze Dependencies: Once you have identified unused clientlibs, it's important to analyze their dependencies. Some clientlibs may be dependencies of other clientlibs or components. Make sure to review these dependencies and their usage to avoid breaking any functionality.

  3. Update Components and Pages: Identify the components and pages that are using the clientlibs you want to remove. Check if these components or pages can function properly without the clientlibs. If they are not required, update the components or pages to remove the references to the unused clientlibs.

  4. Perform a Thorough Testing: After updating the components and pages, perform thorough testing to ensure that the functionality of the website or application is not affected. Test all the relevant use cases and scenarios to ensure everything works as expected.

  5. Do not include authoring specific clientlibs on publish. Example imageeditor, coralui might be needed only on author
  6. Minimize script includes by adjusting dependencies and embed.

Aanchal Sikka

View solution in original post

4 Replies

Avatar

Community Advisor

In the general case, the Granite or Foundation client library is not necessary for page load in Publish mode. They are only needed to be active/present in Author mode. If you intentionally write code that is dependent on those libraries, then you can add those items.

 

Again some components like carousel and tabs have some clientlibs that are also responsible for publish instance also. In that case, if you are using the core clientlib functionality for transactions then you can keep those.
Note: In the maximum site this type of component transaction is maintained by custom clientlib or any third-party tool.

 

For jQuery or like this JS you better use your custom clientlib download from the website. Because those library versions are very old. You can change by your own at any time.

Avatar

Community Advisor

This is the result of your clientlibs "dependencies", you need to clean those up in order to reduce this.

Find more here: https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...



Esteban Bustamante

Avatar

Correct answer by
Community Advisor

@bhagchand 

  1. Identify Unused Clientlibs: Start by identifying clientlibs that are not used in any components or pages. AEM provides a tool called "Client Libraries Optimization" that can help you analyze the usage of clientlibs. It generates a report indicating which clientlibs are not being referenced. Review this report to identify the unused clientlibs. https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html  

  2. Analyze Dependencies: Once you have identified unused clientlibs, it's important to analyze their dependencies. Some clientlibs may be dependencies of other clientlibs or components. Make sure to review these dependencies and their usage to avoid breaking any functionality.

  3. Update Components and Pages: Identify the components and pages that are using the clientlibs you want to remove. Check if these components or pages can function properly without the clientlibs. If they are not required, update the components or pages to remove the references to the unused clientlibs.

  4. Perform a Thorough Testing: After updating the components and pages, perform thorough testing to ensure that the functionality of the website or application is not affected. Test all the relevant use cases and scenarios to ensure everything works as expected.

  5. Do not include authoring specific clientlibs on publish. Example imageeditor, coralui might be needed only on author
  6. Minimize script includes by adjusting dependencies and embed.

Aanchal Sikka