cancel
Showing results for 
Search instead for 
Did you mean: 

Is there a way to aggregate css/js file to reduce http calls

Former Member
0 Kudos

Hi,

I know that Hybris has support for js and css compression. https://help.hybris.com/6.3.0/hcd/8af03fda8669101491e4aac2acaeb2dd.html

Is there a way to combine files to reduce no of http calls. For example: Use something like google closure. This is standard practice is other web based application development like (jhipster/Angular)

former_member618655
Active Participant
0 Kudos

Hi Dhananjay.

The need for compression arises when you have multiple jsp/css files and the request for 2nd jsp/css file waits in queue for the first request to complete. This is called head-of-the-line blocking. Switch over to HTTP 2 which resolves this problem, so there might not be a need for a huge compressed and uglified bundle.

If you can't use HTTP2, I would suggest using gulp/webpack for compression and bundling.

Even after bundling if the file size is too big, consider using nginx which GZIPs static assets before passing it on to a browser. nginx is a web server.

Former Member
0 Kudos

Thanks for the reply. I think its better to use wro for this. I believe Hybris 6.x has support for it. There are just too many files js and css and wro does a good job aggregating them. We also enabled HTTP2 but until the adoption increases we need to rely on wro for reducing the number of calls.

Accepted Solutions (0)

Answers (2)

Answers (2)

Former Member
0 Kudos

Using below property setting, merge of CSS and JS possible, you guys can read about enabling wro4j in Hybris

CSS and JS files compression into one using wro4j project

(https://github.com/wro4j/wro4j) is disabled by default. # Here you can enable it on site/frontend level storefront.wro4j.enabled=true

Former Member
0 Kudos

Not sure if this is what you are looking for but you might want to see how "granule" module is used. By default it is disabled and we can enable it from hac without need for restart.

 storefront.granule.enabled=false # -> currently “false”
 #Can be changed to “true”
 
 storefront.granule.enabled=true

Doing this combines all the css and js into one big file. Only issue is you will have to ensure all the js file have proper end of line delimiter(";").

Former Member
0 Kudos

https://wiki.hybris.com/display/hybrisALF/Infrastructure+Considerations

I think we must refrain from using Granule.

Granule should be disabled as is no longer a maintained project and it can cause serious performance issues in the latest versions of the accelerator: Set storefront.granule.enabled=false