.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.

1. ASP.NET Web Optimization withCOMBRES Buu Nguyen

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

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

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

5. Life Without Combres

6. Define Combres Resource Sets

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

8. Beyond Simple Usages

9. A Couple of Issues

10. Updated Combres Data File

11. 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

12. Filtering Architecture

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

14. 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... **/

15. 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(@"@define*{(?<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(); } }

16. Minification Architecture

17. 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

18. 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>

19. Using Minifiers

20. ///<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); } }

21. Future Direction

22. 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

23. 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

24. Appendix - Combres Quickly

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

26. Step 2. Modify web.config

27. Step 3. Create Combres Data File

28. Step 4. Register Route in global.ascx

29. Step 5. Link to Resource Sets