<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: How to load a specific JavaScript files on a web page in AEM? in Adobe Experience Manager Questions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456145#M131276</link>
    <description>&lt;P&gt;Hi Ameen,&lt;/P&gt;&lt;P&gt;&lt;BR /&gt;From the description how I understand your scenario is ' You have 50 component specific JS files but some pages just need 2 of them in some scenario. You don´t want to load all the 50 together where you use only two ´.&lt;BR /&gt;&lt;BR /&gt;We can achieve this in two ways&lt;BR /&gt;&lt;BR /&gt;1. Using various tagging capabilities of client libraries in AEM. You can create separate category tags for the various groupings of component clientlibs and you can load them on a template level. This is applicable only in scenarios where you have usage of these components are fixed and you have specific templates for these usecases/groupings.&lt;BR /&gt;2. You can use a dynamic import logic using the power of ui.frontend module and webpack. Please refer to [1]. Please note this is not an Adobe supported pattern.&lt;BR /&gt;&lt;BR /&gt;The first approach is OOTB, but please note this has an impact on authoring experience as well. Authors needs to change the template properties if add/remove clientlibs OR they are limited to building an experience only with a limited set of components for specific templates.&lt;BR /&gt;&lt;BR /&gt;[1] -&amp;nbsp;&lt;A href="https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/" target="_blank" rel="noopener"&gt;https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/&lt;/A&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;/P&gt;</description>
    <pubDate>Tue, 14 Jun 2022 09:25:00 GMT</pubDate>
    <dc:creator>Nirmal_Jose</dc:creator>
    <dc:date>2022-06-14T09:25:00Z</dc:date>
    <item>
      <title>How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456105#M131255</link>
      <description>&lt;P&gt;I am trying to load only the specific JavaScript files on a web page in AEM?&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;For example:-&lt;/P&gt;&lt;P&gt;I have 50 JavaScript for my entire website but I need to load only the 2 Scripts instead of loading the whole 50 scripts. In this case, how do I achieve it?&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 06:12:01 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456105#M131255</guid>
      <dc:creator>Ameen_Dev</dc:creator>
      <dc:date>2022-06-14T06:12:01Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456107#M131256</link>
      <description>&lt;P&gt;Use component level clientlibs&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 06:14:58 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456107#M131256</guid>
      <dc:creator>HImanshu_Jain_</dc:creator>
      <dc:date>2022-06-14T06:14:58Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456108#M131257</link>
      <description>&lt;P&gt;Is this a good practice for big websites? or any other way to do this? Because if we are loading the entire scripts for a web page, where it only needed two scripts, then the performance might be affected.&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 06:18:55 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456108#M131257</guid>
      <dc:creator>Ameen_Dev</dc:creator>
      <dc:date>2022-06-14T06:18:55Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456110#M131259</link>
      <description>&lt;P&gt;Create a common clientlib which required across the webpages or page component based clientlib.&lt;/P&gt;&lt;P&gt;And keep component specific clientlib separately .&lt;/P&gt;&lt;P&gt;And if you want to reuse any existing clientlib then you can embed as well.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;refer&amp;nbsp;&lt;A href="https://github.com/AdobeDocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/introduction/clientlibs.md" target="_blank"&gt;https://github.com/AdobeDocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/introduction/clientlibs.md&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&lt;A href="https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en" target="_blank"&gt;https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 06:28:06 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456110#M131259</guid>
      <dc:creator>HImanshu_Jain_</dc:creator>
      <dc:date>2022-06-14T06:28:06Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456122#M131266</link>
      <description>&lt;P&gt;Please explain the following line - "&lt;SPAN&gt;Because if we are loading the entire scripts for a web page, where it only needed two scripts&lt;/SPAN&gt;" . What is entire script here?&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Are you talking about template specific&amp;nbsp;&lt;SPAN&gt;JavaScript files only?&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 07:34:45 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456122#M131266</guid>
      <dc:creator>DEBAL_DAS</dc:creator>
      <dc:date>2022-06-14T07:34:45Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456144#M131275</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17458627"&gt;&lt;/LI-USER&gt;&amp;nbsp;,&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;There is no generic solution implementation to put clientlibs, it varies on every usecase.&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;However, AEM has support to have component level clientlibs, template level clientlibs, embed clientlibs, dependent clientlibs to manage all types of use-cases.&lt;BR /&gt;&lt;BR /&gt;This is the blog which talks about when to use what implementation of clientlibs :&lt;BR /&gt;&lt;A href="http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem63-part2_25.html" target="_blank"&gt;http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem63-part2_25.html&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Documentation on clientlibs can be found here :&lt;BR /&gt;&lt;A href="https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en" target="_blank"&gt;https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Hope this helps.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks,&lt;/P&gt;&lt;P&gt;Milind&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 08:19:28 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456144#M131275</guid>
      <dc:creator>milind_bachani</dc:creator>
      <dc:date>2022-06-14T08:19:28Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456145#M131276</link>
      <description>&lt;P&gt;Hi Ameen,&lt;/P&gt;&lt;P&gt;&lt;BR /&gt;From the description how I understand your scenario is ' You have 50 component specific JS files but some pages just need 2 of them in some scenario. You don´t want to load all the 50 together where you use only two ´.&lt;BR /&gt;&lt;BR /&gt;We can achieve this in two ways&lt;BR /&gt;&lt;BR /&gt;1. Using various tagging capabilities of client libraries in AEM. You can create separate category tags for the various groupings of component clientlibs and you can load them on a template level. This is applicable only in scenarios where you have usage of these components are fixed and you have specific templates for these usecases/groupings.&lt;BR /&gt;2. You can use a dynamic import logic using the power of ui.frontend module and webpack. Please refer to [1]. Please note this is not an Adobe supported pattern.&lt;BR /&gt;&lt;BR /&gt;The first approach is OOTB, but please note this has an impact on authoring experience as well. Authors needs to change the template properties if add/remove clientlibs OR they are limited to building an experience only with a limited set of components for specific templates.&lt;BR /&gt;&lt;BR /&gt;[1] -&amp;nbsp;&lt;A href="https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/" target="_blank" rel="noopener"&gt;https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/&lt;/A&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;/P&gt;</description>
      <pubDate>Tue, 14 Jun 2022 09:25:00 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456145#M131276</guid>
      <dc:creator>Nirmal_Jose</dc:creator>
      <dc:date>2022-06-14T09:25:00Z</dc:date>
    </item>
    <item>
      <title>Re: How to load a specific JavaScript files on a web page in AEM?</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456150#M131279</link>
      <description>&lt;P&gt;It looks like you have all the clientlibs in a single category.&lt;/P&gt;&lt;P&gt;Or you have added all the categories in all the pages.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;To overcome this,&amp;nbsp;&lt;/P&gt;&lt;P&gt;You can :&lt;/P&gt;&lt;UL&gt;&lt;LI&gt;Break down the clientlibs into relevant categories and call them on the component level &amp;amp; the template level.&lt;/LI&gt;&lt;LI&gt;If you have a single script which is built through webpack, you can tweak the webpack file and then break it down into smaller scripts and place them in crx and assign different categories.&lt;/LI&gt;&lt;/UL&gt;</description>
      <pubDate>Tue, 14 Jun 2022 08:53:18 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-load-a-specific-javascript-files-on-a-web-page-in-aem/m-p/456150#M131279</guid>
      <dc:creator>Anmol_Bhardwaj</dc:creator>
      <dc:date>2022-06-14T08:53:18Z</dc:date>
    </item>
  </channel>
</rss>

