Skip to content

Composite Files

Jump to bottom Edit New page
Shannon Deminick edited this page Apr 27, 2015 · 8 revisions

Table of contents

What is a 'Composite File' ?
Debugging
How does it work ?
Composite groups
Url types
Caching

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

Composite Groups

Documentation coming soon!

URL Types

When the CDF combines,compresses & minifies your files, it creates a URL for the new composite file. The framework supports 3 different styles of URLs, each with its own benefits. You can change the URL style by modifying your config in the config attribute urlType:

<add name="CompositeFileProcessor" urlType="MappedId" />

The valid values for urlType is Base64QueryStrings, Base64Paths, MappedId. The default is MappedId.

Mapped id (nice urls)
  • This is the default. It works by creating a map of the required dependencies on the server before rendering out the html request. The map creates a key which acts as a reference to all of the required dependencies
  • Pros: Much nicer short urls, each URL can contain an unlimited number of paths, no need to set a max url property or worry about query string lengths
  • Cons: Not been tested with CDN origin pull, will not work in load balanced environments
  • Example: /DependencyHandler.axd/a81e571a8b49102634ad102bc5f1ef40/58/js
Base64 with query strings
  • Paths of your CSS and JavaScript converted into base64 strings to be read back out on the server. Uses query strings to depict the dependencies, version and type
  • Pros: the max URL length is only limited by IE's max query string length (CDF takes care of this by 'staggering' the tag output so it doesn't exceed this limit), easy to create and parse, contains all path information in the request which can be used in load balanced & replicated environments
  • Cons: the URLs are 'ugly' and long if you care about that kind of thing, some proxies like to strip out or modify query strings from request which in some very rare cases have caused issues, doesn't work with origin pull CDNs like Cloud Front because they don't support query strings, dependencies need to be split depending on the max query string length as there is only so much data you can fit into a URL
  • Example: /DependencyHandler.axd?s=L0Nzcy9DdXN0b21Db250cm9sLmNzczsvQ3NzL0NvbnRlbnQuY3NzOy9Dc3MvQ29udHJvbHMuY3NzOy9Dc3MvQ29sb3JTY2hlbWUuY3NzOy9Dc3MvU2l0ZS5jc3M7&t=Css&cdv=58
Base64 with paths
  • Similar to base64 with query strings in that the CSS and JavaScript paths are converted to base 64 and read back out on the server. The difference is that there are no query strings and instead the URLs are created with base64 paths
  • Pros: slightly nicer than base64 with query strings, works with origin pull CDNs like Cloud Front, easy to create and parse, contains all path information in the request which can be used in load balanced & replicated environments, the max URL length is not restricted by IE's max query string length
  • Cons: The max URL length parameter: maxUrlLength needs to be set in the web.config to support long URLs, the URLs are still quite long, dependencies will need to be split depending on the max url length parameter as there is only so much data you can fit into a URL
  • Example: /DependencyHandler.axd/L0Nzcy9DdXN0b21Db250cm9sLmNzczsvQ3NzL0NvbnRlbnQuY3NzOy9Dc3MvQ29udHJvbHMuY3NzOy9Dc3MvQ29sb3JTY2hlbWUuY3NzOy9Dc3MvU2l0ZS5jc3M7/58/css

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.
Add a custom footer
Add a custom sidebar
Clone this wiki locally