Css and Js files only for used components

FernandoUchiyam 25-09-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar
MVP
25-09-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.

Answers (6)

Answers (6)

FernandoUchiyam 25-09-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.

Veena_07
MVP
25-09-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... .

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

Thanks

Veena

FernandoUchiyam 25-09-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.