Css and Js files only for used components | Community
Skip to main content
FernandoUchiyam
FernandoUchiyam
New Participant
September 25, 2018
Solved

Css and Js files only for used components

  • September 25, 2018
  • 7 replies
  • 2056 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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.

7 replies

arunpatidar
arunpatidarAccepted solution
New Participant
September 25, 2018

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.

Arun Patidar
FernandoUchiyam
FernandoUchiyamAuthor
New Participant
September 25, 2018

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.

VeenaVikraman
VeenaVikraman
New Participant
September 25, 2018

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, CSS & JavaScript .

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

Thanks

Veena

smacdonald2008
smacdonald2008
New Participant
September 25, 2018

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

FernandoUchiyam
FernandoUchiyamAuthor
New Participant
September 25, 2018

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
smacdonald2008
New Participant
September 25, 2018

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

smacdonald2008
smacdonald2008
New Participant
September 25, 2018

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

Terms & ConditionsAccessibility statement

Loading footer...