Your SlideShare is downloading. ×
0
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Combres
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Combres

3,712

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 …

.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
3,712
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ASP.NET Web Optimization withCOMBRES<br />Buu Nguyen<br />
  • 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. Combres optimizes your web apps by combining,minifying,compressing, caching, and enhancingCSS & JavaScript resources before sending them to browser<br />
  • 4. Agenda<br />Combres Overview<br />Beyond Simple Usage<br />Filtering Architecture<br />Minification Architecture<br />Future Direction<br />Appendix – Combres Quickly<br />
  • 5. Life Without Combres<br />
  • 6. Define Combres Resource Sets<br />
  • 7. HTTP Response<br />Combine, Cache, Compress<br />Original CSS size is 33KB –<br />a 85% size decrease<br />Minify<br />
  • 8. Beyond Simple Usages<br />
  • 9. A Couple of Issues<br />
  • 10. Updated Combres Data File<br />
  • 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. Filtering Architecture<br />
  • 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. 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. 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. Minification Architecture<br />
  • 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. 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. Using Minifiers<br />
  • 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. Future Direction<br />
  • 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. 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. Appendix - Combres Quickly<br />
  • 25. Step 1. Add References<br />Red: required DLLs<br />Blue: optional DLLs<br />
  • 26. Step 2. Modify web.config <br />
  • 27. Step 3. Create Combres Data File<br />
  • 28. Step 4. Register Route in global.ascx<br />
  • 29. Step 5. Link to Resource Sets<br />

×