Combres
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Combres

on

  • 4,860 views

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

Statistics

Views

Total Views
4,860
Views on SlideShare
3,480
Embed Views
1,380

Actions

Likes
1
Downloads
30
Comments
0

10 Embeds 1,380

http://www.buunguyen.net 1234
http://buunguyen.net 79
http://cms.kms-technology.com 33
http://cms.kms.com.vn 13
http://www.slideshare.net 11
http://sotayblog.com 5
http://webcache.googleusercontent.com 2
http://localhost:8730 1
http://localhost:5200 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Combres Presentation Transcript

  • 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(@"@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();
    }
    }
  • 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