Combres

4,095 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,095
On SlideShare
0
From Embeds
0
Number of Embeds
1,419
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Combres

  1. 1. ASP.NET Web Optimization withCOMBRES<br />Buu Nguyen<br />
  2. 2. Buu Nguyen<br />Director of Technology, KMS Technology, www.kms-technology.com<br />Lecturer, RMIT Vietnam, www.rmit.edu.vn<br />www.buunguyen.net/blog<br />Twitter: buunguyen<br />
  3. 3. Combres optimizes your web apps by combining,minifying,compressing, caching, and enhancingCSS & JavaScript resources before sending them to browser<br />
  4. 4. Agenda<br />Combres Overview<br />Beyond Simple Usage<br />Filtering Architecture<br />Minification Architecture<br />Future Direction<br />Appendix – Combres Quickly<br />
  5. 5. Life Without Combres<br />
  6. 6. Define Combres Resource Sets<br />
  7. 7. HTTP Response<br />Combine, Cache, Compress<br />Original CSS size is 33KB –<br />a 85% size decrease<br />Minify<br />
  8. 8. Beyond Simple Usages<br />
  9. 9. A Couple of Issues<br />
  10. 10. Updated Combres Data File<br />
  11. 11. Auto-Versioning<br />You’ve just seen auto-versioning in action<br />Automatically detects changes to<br />Addition/removal of resources in a set<br />Contents of static/dynamic resources <br />Applied filters & their parameters<br />Applied minifier & its parameters<br />Can switch version generation algorithm<br />Turn-on once, and never have to touch the data file to modify version again<br />
  12. 12. Filtering Architecture<br />
  13. 13. Intercept Combres Pipeline<br />Read Resource<br />Filter<br />Filter<br />Filter<br />Filter<br />Filter<br />Filter<br />Filter<br />Filter<br />invokes<br />Combine Resources<br />invokes<br />Minify Combination<br />invokes<br />Compress Combination<br />invokes<br />
  14. 14. CSS-Variable Filter<br />@define<br />{<br />background: #5c87b2;<br />font-family: Verdana,Helvetica,Sans-Serif;<br />}<br />body<br />{<br />background-color: @background;<br />font-family: @font-family; <br />font-size: .75em;<br />}<br />/** more CSS... **/<br />body<br />{<br />background-color: #5c87b2;<br />font-family: Verdana,Helvetica,Sans-Serif; <br />font-size: .75em;<br />}<br />/** more CSS... **/<br />
  15. 15. publicsealedclassHandleCssVariablesFilter : ISingleContentFilter<br />{<br />///&lt;inheritdoccref=&quot;IContentFilter.CanApplyTo&quot; /&gt;<br />publicboolCanApplyTo(ResourceTyperesourceType)<br /> {<br />returnresourceType == ResourceType.CSS;<br /> }<br />///&lt;inheritdoccref=&quot;ISingleContentFilter.TransformContent&quot; /&gt;<br />publicstringTransformContent(Settingssettings, Resourceresource, string content)<br /> {<br />if (!CanApplyTo(resource.ParentSet.Type))<br />thrownewArgumentException(&quot;Filter can&apos;t be applied to &quot; + <br />resource.ParentSet.Type);<br />// Remove comments because they may mess up the result<br /> content = Regex.Replace(content, @&quot;/*.*?*/&quot;, string.Empty, <br />RegexOptions.Singleline);<br />varregex = newRegex(@&quot;@defines*{(?&lt;define&gt;.*?)}&quot;, RegexOptions.Singleline);<br />var match = regex.Match(content);<br />if (!match.Success)<br />return content;<br />var value = match.Groups[&quot;define&quot;].Value;<br />var variables = value.Split(&apos;;&apos;);<br />varsb = newStringBuilder(content);<br />variables.ToList().ForEach(variable =&gt;<br /> {<br />if (string.IsNullOrEmpty(variable.Trim()))<br />return;<br />var pair = variable.Split(&apos;:&apos;);<br />sb.Replace(&quot;@&quot; + pair[0].Trim(), pair[1].Trim());<br /> });<br />// Remove the variables declaration, it&apos;s not needed in the final output<br />sb.Replace(match.ToString(), string.Empty);<br />returnsb.ToString();<br /> }<br />}<br />
  16. 16. Minification Architecture<br />
  17. 17. Minification<br />By default, .NET YUI Compressor library is used for JS & CSS minification<br />Alternative built-in minifiers<br />Google Closure (JS only)<br />MS Ajax Minifier (JS only)<br />It’s also possible to add your own minifier<br />
  18. 18. Built-in Minifiers<br />&lt;cssMinifiers&gt;<br /> &lt;minifiername=&quot;yui&quot;type=&quot;Combres.Minifiers.YuiCssMinifier, Combres&quot;&gt;<br /> &lt;paramname=&quot;CssCompressionType&quot;type=&quot;string&quot;value=&quot;StockYuiCompressor&quot; /&gt;<br /> &lt;paramname=&quot;ColumnWidth&quot;type=&quot;int&quot;value=&quot;-1&quot; /&gt;<br /> &lt;/minifier&gt;<br />&lt;/cssMinifiers&gt;<br />&lt;jsMinifiers&gt;<br /> &lt;minifiername=&quot;yui&quot;type=&quot;Combres.Minifiers.YuiJSMinifier, Combres&quot;&gt;<br /> &lt;paramname=&quot;IsVerboseLogging&quot;type=&quot;bool&quot;value=&quot;false&quot; /&gt;<br /> &lt;paramname=&quot;IsObfuscateJavascript&quot;type=&quot;bool&quot;value=&quot;true&quot; /&gt;<br /> &lt;paramname=&quot;PreserveAllSemicolons&quot;type=&quot;bool&quot;value=&quot;false&quot; /&gt;<br /> &lt;paramname=&quot;DisableOptimizations&quot;type=&quot;bool&quot;value=&quot;false&quot; /&gt;<br /> &lt;paramname=&quot;LineBreakPosition&quot;type=&quot;int&quot;value=&quot;-1&quot; /&gt;<br /> &lt;/minifier&gt;<br /> &lt;minifiername=&quot;msajax&quot;type=&quot;Combres.Minifiers.MSAjaxJSMinifier, Combres&quot;<br />binderType=&quot;Combres.Binders.SimpleObjectBinder, Combres&quot;&gt;<br /> &lt;paramname=&quot;CollapseToLiteral&quot;type=&quot;bool&quot;value=&quot;true&quot; /&gt;<br /> &lt;paramname=&quot;EvalsAreSafe&quot;type=&quot;bool&quot;value=&quot;true&quot; /&gt;<br /> &lt;paramname=&quot;LocalRenaming&quot;type=&quot;Microsoft.Ajax.Utilities.LocalRenaming, ajaxmin&quot;<br />value=&quot;CrunchAll&quot; /&gt;<br /> &lt;paramname=&quot;OutputMode&quot;type=&quot;Microsoft.Ajax.Utilities.OutputMode, ajaxmin&quot;<br /> value=&quot;SingleLine&quot; /&gt;<br /> &lt;paramname=&quot;RemoveUnneededCode&quot;type=&quot;bool&quot;value=&quot;true&quot; /&gt;<br /> &lt;paramname=&quot;StripDebugStatements&quot;type=&quot;bool&quot;value=&quot;true&quot; /&gt;<br /> &lt;/minifier&gt;<br /> &lt;minifiername=&quot;closure&quot;type=&quot;Combres.Minifiers.ClosureJSMinifier, Combres&quot;&gt;<br /> &lt;paramname=&quot;ApiUrl&quot;type=&quot;string&quot;<br />value=&quot;http://closure-compiler.appspot.com/compile&quot; /&gt;<br /> &lt;paramname=&quot;CompilationLevel&quot;type=&quot;string&quot;value=&quot;ADVANCED_OPTIMIZATIONS&quot; /&gt;<br /> &lt;/minifier&gt;<br />&lt;/jsMinifiers&gt;<br />
  19. 19. Using Minifiers<br />
  20. 20. ///&lt;summary&gt;<br />/// CSS minifier which delegates the minification process to the<br />/// YUI Compressor library (http://yuicompressor.codeplex.com/).<br />///&lt;/summary&gt;<br />publicsealedclassYuiCssMinifier : IResourceMinifier, IParametersReceiver<br />{<br />///&lt;inheritdoccref=&quot;IParametersReceiver.Binder&quot; /&gt;<br />publicIObjectBinder Binder { get; set; }<br />///&lt;inheritdoccref=&quot;IParametersReceiver.Parameters&quot; /&gt;<br />publicIList&lt;XElement&gt; Parameters { get; set; }<br />publicstringCssCompressionType { get; set; }<br />publicint? ColumnWidth { get; set; }<br />///&lt;inheritdoccref=&quot;IResourceMinifier.Minify&quot; /&gt;<br />publicstring Minify(Settingssettings, ResourceSetrs, <br />stringcombinedContent)<br /> {<br />Binder.Bind(Parameters, this);<br />var type = (CssCompressionType)CssCompressionType.ConvertToType(<br />typeof(CssCompressionType), <br />Yahoo.Yui.Compressor.CssCompressionType.StockYuiCompressor);<br />returnCssCompressor.Compress(combinedContent, <br />ColumnWidth == null ? -1 : ColumnWidth.Value,<br /> type);<br /> }<br />}<br />
  21. 21. Future Direction<br />
  22. 22. Future Direction<br />Pluggable cache provider<br />Velocity, DB<br />Filter to support CSS expression<br />Pipeline optimization<br />Allow disable compression<br />Idea? Bug? Feature? Contribution?<br />http://combres.codeplex.com/Thread/List.aspx<br />http://combres.codeplex.com/WorkItem/List.aspx<br />http://combres.codeplex.com/SourceControl/UploadPatch.aspx<br />
  23. 23. Download Combres 1.2<br />http://combres.codeplex.com<br />Download include<br />Binary (.NET 3.5) and referenced libraries<br />Source code & CHM doc<br />Sample code<br />Sample data files (with annotation)<br />Licensed under Apache 2.0<br />
  24. 24. Appendix - Combres Quickly<br />
  25. 25. Step 1. Add References<br />Red: required DLLs<br />Blue: optional DLLs<br />
  26. 26. Step 2. Modify web.config <br />
  27. 27. Step 3. Create Combres Data File<br />
  28. 28. Step 4. Register Route in global.ascx<br />
  29. 29. Step 5. Link to Resource Sets<br />

×