atomsite.net

Asset combination reduces the number of requests made to download a page resulting in faster load times. Also, with smart caching techniques, less data is transferred on subsequent requests.  Assets can be better organized into functional groups for smart asset combination requests.  The development experience is simplified due to improvements in organizing assets.  For example, widgets/pages can have their own stylesheet and javascript files making things easier to manage and locate.

Caching

For performance reasons, these files are marked with a far-future cache expiration as recommended by YUI Slow.  However, if a user installs a plugin (i.e. adds new script or styles to the combination) we need a way to tell the browser there is a new js/css file to download rather than using the cached version.  AtomSite is able to use an MD5 hash of the combined script/css file to ensure the file is re-downloaded.

For example:
<link rel='stylesheet' type='text/css' href='/css/combined/admin.css?v=881BC213842E88672045FA63BA6CD055' />

AtomSite also uses the MD5 hash for the ETag so that smart browsers only re-download when any of the scripts within the combined group changes.

Grouping

Assets can be organized into groups depending on when or where they are displayed.  The master view controls the groups loaded when as a content view is rendered.  For example, the default group is the "site" group and it is requested from the Site.master view.  Another major group is the "admin" group which is requested from the Admin.master view.

The master view will request assets that it needs to work.  Also, each content view may have additional assets that they require.  Further, since each view can be composited with widgets, those individual widgets may require additional assets. 

The idea behind grouping is that there are certain functional areas of a website that will reuse or share assets.  For example, CS.2 is shared between two widgets.  Another content page will likely reuse the same widgets.

By grouping and combining assets, we can minimize the number of asset requests across similar functional areas of a website.

When group combining is disabled, there will be one request to the server for each unique asset.

When group combine is enabled, there are far fewer requests.  Notice that non-grouped , or global assets (such as framework assets like jQuery) are not combined.  These assets are usually part of a CDN.

Furthermore, we can reduce the download size of the combined assets by minification.  We use Yahoo! UI Library: YUI Compressor for .Net to minify both javascript and css.

Development

Assets should be included into a group based on their usage in a functional area of the application. Pages and widgets are responsible for registering their assets in groups as needed.  The groups are requested by the master view through the underlying PageModel.

Lets say you develop a new forum plugin.  It would make sense to have a new asset group called "forum" that all the pages and widgets register their assets in.  This allows for a large functional area (like a forum) to download all the combined assets in one request when a user loads a any forum page.

Please see the Admin plugin for an example of how asset grouping is used in a functional area.

Settings

You can disable this feature in the web.config application settings. Also, you can control whether the combined scripts get minified. These settings make it easier to debug during development.

Disabled

CSS and Javascript files are not combined and will be included individually as link or script tags.

Combine

The CSS/JS files are combined based on the group they are registered with. Note: only widget assets that are included get combined.

CombineAndMinify (default)

Same as above but the assets also get minified using the YUI minification library.