Using the asset manager to combine JS and CSS files

sugarcrmdevelopers —  November 26, 2012 — 1 Comment

Many times when you are building a custom module or add-on to Sugar, you have lots of code that needs loaded to render the entire page. These include asset files such as JS and CSS, which for each one you request makes the page load time a bit slower. Look at this graph from Safari for an example…

Each asset needing loaded blocks the subsequent one from loading, which in turn slows down the full page load time. While you can use some techniques such as compression and versioning to help this out, you still cannot avoid the assets needing to be loaded at least once on the client end. And if the load time is slow, the user experience suffers, thus making some unhappy users.

To get around this with Sugar module development, we have an asset manager inside of Sugar. It’s been around for a long time, but starting with 6.5.3 it’s become much easier to leverage for custom module development by using the Ext framework.

What it does is take a set of either CSS or JS files and combine and minify them automatically, enabling you to deliver one package of assets rather than multiple ones, in turn improving page load speed. To do leverage this, simply add a PHP file with the definition in it in the custom/Extension/application/Ext/JSGroupings/ directory that looks like this…

Using this technique will make your page load time decrease, as well as save you bandwidth costs by delivering less bits to the client browser.

One response to Using the asset manager to combine JS and CSS files

  1. 

    How do you load the combined files into Sugar 7?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s