Css and Js files only for used components

[FernandoUchiyam]

Hi there,

Our website have a JS file that includes the js code of all components.

Also, we have a CSS file that includes the js code of all components.

The problem is that components that we are not using are also included in the JS and CSS files.

Is it possible to make Adobe AEM generate CSS and JS code only for the components that are being used in the current page?

Thanks

[smacdonald2008]

To build components - you typically implement them using HTL. You need to have your logic using HTML - not only JS or CSS.

[smacdonald2008]

To gain a better understanding of building components in AEM - start by going through this tutorial - - Getting Started with AEM Sites - WKND Tutorial

[FernandoUchiyam]

Hello!

@smacdonald2008 Actually, we have more than 30 components already built in our project. Our site is in production. Everything is OK.

But we noticed that in every page, Adobe AEM generates and loads css and js code for all the existing components, even for the ones we are not using in the current page.

We want some solution to load the css and js files only for the components that are being used in the current page.

[smacdonald2008]

Are you using Clientlibs to load your CSS and JS? That is how CSS and JS are typically used in AEM.

[VeenaVikraman]

Hi FernandoUchiyama​

      If I understand your issue correct ; you don't want to include CSS or JS in a page for any component not included in that page. You can categorize your CSS and JS according to your need . Please follow this tutorial Getting Started with AEM Sites Part 3 - Client-Side Libraries and Responsive Grid which clearly explains how to structure the client libraries and add those on your pages. Additional information is available here Getting Started with Core Components and the AEM Style System - Part 4 - Organizing Client Libraries... .

    Please let us know if this doesn't help you to solve your problem

Thanks

Veena

[FernandoUchiyam]

Yes, we are using clientlibs.

We have a `clientlibs-site` folder that has global css and js code.

Also, we have a `clientlib` for each of the components (most of them).

What Adobe AEM is doing is generating only one CSS file and one JS file for the ENTIRE SITE.

We would like Adobe AEM to generate different CSS file and JS file for each page, depending on the components that are being used in it.

[arunpatidar · Accepted solution]

Hi,

Adobe AEM doesn't have option to generate CSS/JS based on components added in the page.

For CSS it is always good to load via single minified CSS rather than making too many request for small piece of css.

For JS , you can create your JS loader using clientlibs and create your component level js outside clieblibs category and load on page load based on components in the page.