Style sheet and javascript bundling

Bundling

Bundling means that you combine multiple style sheets or javascripts into a single file (one file for each type) that will be downloaded from the client insted of several style sheets and javascript files. The bundle also minifies the result to make the response as small as possible.

How to use bundling

To use bundling we have created webcontrols that you easily add into your aspx-code to create correct tags. To make debugging easier during development the webcontrols have a setting that can turn of bundling and in that case write out links to each javscript or stylesheet.

<web:StyleSheet runat="server" debug="false" />

or

<web:javascript runat="server" debug="false" />

By default the webcontrols will read the plain text file with name files.config found in /ui/css or /ui/javascript to get a filelist of style sheets or javascripts that should be included when using and rendering the controls. The configuration files should contain a path for each file per row to be included in the output.

You can create multiple configuration files in different locations. To be able to use the webcontrols contain a property with name ConfigFile that will point out the location of the configuration file.

The attribute debug can have value false, true or Auto. When the value are auto the settings from the debug-flag in web.config will be used and when debug are true the bundle are turned off.

Change the minification process

You can change the default implementation using YUICompression.Net library to your own method. This is made for each type; style sheet and javascript, to make the solution as flexible as possible.

When you create your own minification you will make a method like as follows:

public string MyMinification(string uncompressed) {
  var compressedData = uncompressed; //Add logic to comress the uncompressed data
  return compressedData;
}

To assign the new minification method you need to do that in some start-up code; example global.asax, as follows:

Change style sheet compression

Litium.Foundation.Modules.UICompressor.CssCompressionHandler.Compressor = MyMinification;

Change JavaScript compression

Litium.Foundation.Modules.UICompressor.JavaScriptCompressionHandler.Compressor = MyMinification;