Asset CombinationPosted in Technical by JarrettV on 8/4/2009 6:07:00 PM - CST
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.
<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.
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.
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.
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.
- 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.