Combres

ASP.NET Web Optimization withCOMBRES
Buu Nguyen

Buu Nguyen
Director of Technology, KMS Technology, www.kms-technology.com
Lecturer, RMIT Vietnam, www.rmit.edu.vn
www.buunguyen.net/blog
Twitter: buunguyen

Combres optimizes your web apps by combining,minifying,compressing, caching, and enhancingCSS & JavaScript resources before sending them to browser

Agenda
Combres Overview
Beyond Simple Usage
Filtering Architecture
Minification Architecture
Future Direction
Appendix – Combres Quickly

Life Without Combres

Define Combres Resource Sets

HTTP Response
Combine, Cache, Compress
Original CSS size is 33KB –
a 85% size decrease
Minify

Beyond Simple Usages

A Couple of Issues

Updated Combres Data File

Auto-Versioning
You’ve just seen auto-versioning in action
Automatically detects changes to
Addition/removal of resources in a set
Contents of static/dynamic resources
Applied filters & their parameters
Applied minifier & its parameters
Can switch version generation algorithm
Turn-on once, and never have to touch the data file to modify version again

Filtering Architecture

Intercept Combres Pipeline
Read Resource
Filter
Filter
Filter
Filter
Filter
Filter
Filter
Filter
invokes
Combine Resources
invokes
Minify Combination
invokes
Compress Combination
invokes

CSS-Variable Filter
@define
{
background: #5c87b2;
font-family: Verdana,Helvetica,Sans-Serif;
}
body
{
background-color: @background;
font-family: @font-family;
font-size: .75em;
}
/** more CSS... **/
body
{
background-color: #5c87b2;
font-family: Verdana,Helvetica,Sans-Serif;
font-size: .75em;
}
/** more CSS... **/

publicsealedclassHandleCssVariablesFilter : ISingleContentFilter
{
///<inheritdoccref="IContentFilter.CanApplyTo" />
publicboolCanApplyTo(ResourceTyperesourceType)
{
returnresourceType == ResourceType.CSS;
}
///<inheritdoccref="ISingleContentFilter.TransformContent" />
publicstringTransformContent(Settingssettings, Resourceresource, string content)
{
if (!CanApplyTo(resource.ParentSet.Type))
thrownewArgumentException("Filter can't be applied to " +
resource.ParentSet.Type);
// Remove comments because they may mess up the result
content = Regex.Replace(content, @"/*.*?*/", string.Empty,
RegexOptions.Singleline);
varregex = newRegex(@"@defines*{(?<define>.*?)}", RegexOptions.Singleline);
var match = regex.Match(content);
if (!match.Success)
return content;
var value = match.Groups["define"].Value;
var variables = value.Split(';');
varsb = newStringBuilder(content);
variables.ToList().ForEach(variable =>
{
if (string.IsNullOrEmpty(variable.Trim()))
return;
var pair = variable.Split(':');
sb.Replace("@" + pair[0].Trim(), pair[1].Trim());
});
// Remove the variables declaration, it's not needed in the final output
sb.Replace(match.ToString(), string.Empty);
returnsb.ToString();
}
}

Minification Architecture

Minification
By default, .NET YUI Compressor library is used for JS & CSS minification
Alternative built-in minifiers
Google Closure (JS only)
MS Ajax Minifier (JS only)
It’s also possible to add your own minifier

Built-in Minifiers
<cssMinifiers>
<minifiername="yui"type="Combres.Minifiers.YuiCssMinifier, Combres">
<paramname="CssCompressionType"type="string"value="StockYuiCompressor" />
<paramname="ColumnWidth"type="int"value="-1" />
</minifier>
</cssMinifiers>
<jsMinifiers>
<minifiername="yui"type="Combres.Minifiers.YuiJSMinifier, Combres">
<paramname="IsVerboseLogging"type="bool"value="false" />
<paramname="IsObfuscateJavascript"type="bool"value="true" />
<paramname="PreserveAllSemicolons"type="bool"value="false" />
<paramname="DisableOptimizations"type="bool"value="false" />
<paramname="LineBreakPosition"type="int"value="-1" />
</minifier>
<minifiername="msajax"type="Combres.Minifiers.MSAjaxJSMinifier, Combres"
binderType="Combres.Binders.SimpleObjectBinder, Combres">
<paramname="CollapseToLiteral"type="bool"value="true" />
<paramname="EvalsAreSafe"type="bool"value="true" />
<paramname="LocalRenaming"type="Microsoft.Ajax.Utilities.LocalRenaming, ajaxmin"
value="CrunchAll" />
<paramname="OutputMode"type="Microsoft.Ajax.Utilities.OutputMode, ajaxmin"
value="SingleLine" />
<paramname="RemoveUnneededCode"type="bool"value="true" />
<paramname="StripDebugStatements"type="bool"value="true" />
</minifier>
<minifiername="closure"type="Combres.Minifiers.ClosureJSMinifier, Combres">
<paramname="ApiUrl"type="string"
value="http://closure-compiler.appspot.com/compile" />
<paramname="CompilationLevel"type="string"value="ADVANCED_OPTIMIZATIONS" />
</minifier>
</jsMinifiers>

Using Minifiers

///<summary>
/// CSS minifier which delegates the minification process to the
/// YUI Compressor library (http://yuicompressor.codeplex.com/).
///</summary>
publicsealedclassYuiCssMinifier : IResourceMinifier, IParametersReceiver
{
///<inheritdoccref="IParametersReceiver.Binder" />
publicIObjectBinder Binder { get; set; }
///<inheritdoccref="IParametersReceiver.Parameters" />
publicIList<XElement> Parameters { get; set; }
publicstringCssCompressionType { get; set; }
publicint? ColumnWidth { get; set; }
///<inheritdoccref="IResourceMinifier.Minify" />
publicstring Minify(Settingssettings, ResourceSetrs,
stringcombinedContent)
{
Binder.Bind(Parameters, this);
var type = (CssCompressionType)CssCompressionType.ConvertToType(
typeof(CssCompressionType),
Yahoo.Yui.Compressor.CssCompressionType.StockYuiCompressor);
returnCssCompressor.Compress(combinedContent,
ColumnWidth == null ? -1 : ColumnWidth.Value,
type);
}
}

Future Direction

Future Direction
Pluggable cache provider
Velocity, DB
Filter to support CSS expression
Pipeline optimization
Allow disable compression
Idea? Bug? Feature? Contribution?
http://combres.codeplex.com/Thread/List.aspx
http://combres.codeplex.com/WorkItem/List.aspx
http://combres.codeplex.com/SourceControl/UploadPatch.aspx

Download Combres 1.2
http://combres.codeplex.com
Download include
Binary (.NET 3.5) and referenced libraries
Source code & CHM doc
Sample code
Sample data files (with annotation)
Licensed under Apache 2.0

Appendix - Combres Quickly

Step 1. Add References
Red: required DLLs
Blue: optional DLLs

Step 2. Modify web.config

Step 3. Create Combres Data File

Step 4. Register Route in global.ascx

Step 5. Link to Resource Sets

http://www.buunguyen.net	630
http://buunguyen.net	51
http://cms.kms-technology.com	33
http://cms.kms.com.vn	13
http://www.slideshare.net	11
http://sotayblog.com	3
http://webcache.googleusercontent.com	2
http://localhost:8730	1
http://localhost:5200	1
http://translate.googleusercontent.com	1

Combres

by Buu Nguyen on Dec 14, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 746

Statistics

Combres — Presentation Transcript