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

Debuggin 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"/>