Composite Files

What is a 'Composite File'?

A composite file is the result of combining, compressing and minifying files. Essentially it refers to a single file/resource created out of many individual files.

Debugging

Debugging JS/CSS with composite files enabled is not very nice so when debugging/developing, ensure that this section is set to true in your web.config: <compilation debug="true">. This will ensure taht no combination, compression or minification will take place.

How does it work ?

When the site is deployed with <compilation debug="false"> then composite files will be enabled (so long as they are also enabled in the CDF configuration. By default the composite file URL will be handled using the OOTB DependencyHandler.axd (though this is configurable if you want to change it).

By enabling composite files, page peformance is drammatically improved. For example, if you have 20 JavaScript files and 10 CSS files that need to be rendered in one page, this means that the browser is making 30 seperate requests. Since most browsers have a maximum number of concurrent request that can be processed, the time to load a page is increased. With ClientDependency, the number of requests for JavaScript and CSS files is reduced to 2 (generally), one for JavaScript and one for CSS.

Example, when composite files are enabled the rendered HTML for CSS might look like:

<link href="/VirtualFolderTest/DependencyHandler.axd/88b85066c09ae076e7eea19116dca549/111/css" type="text/css" rel="stylesheet"/>

When they are disabled during development, the result might look like:

<link href="/Css/Content.css?cdv=111" type="text/css" rel="stylesheet"/>
<link href="/Css/ColorScheme.css?cdv=111" type="text/css" rel="stylesheet"/>
<link href="/Css/Site.css?cdv=111" type="text/css" rel="stylesheet"/>
<link href="/Css/Controls.css?cdv=111" type="text/css" rel="stylesheet"/>
<link href="/Css/CustomControl.css?cdv=111" type="text/css" rel="stylesheet"/>

Caching

There are a couple levels of caching in CDF for best performance:

• Composite file persistence
  • By default the persistFiles configuration setting is enabled for composite files. What this means is that any time a composite file is requested we persist the combined, compressed and minified file to the file system (based on the current requesting brower's supported compression). We do this so that we don't have to re-process these files even when the app pool is restarted.
  • The persisted files are saved according to the current version, any requesting browser's supported compression and a hash of the combined files. If you change your JS/CSS then you should normally change your version, but otherwise you will need to clear the persisted files since CDF will just return the already processed files if they exist.
  • File persistence is fully configurable.
• Output Caching
  • When a composite file is returned from the handler, the result is added to the ASP.Net OutputCache. If persisting composite files is enabled, an OutputCache dependency will be put on the persisted composite file. Whenever a composite file is requested ASP.Net will first check the OutputCache based on the combination of the requesting brower's compression supported and the URL.
  • In order to clear the OutputCache cache you can either restart your web application, or delete the persisted composite file that was created for the request so long as persisting composite files is enabled.