Combres
Upcoming SlideShare
Loading in...5
×
 

Combres

on

  • 4,749 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,749
Views on SlideShare
3,398
Embed Views
1,351

Actions

Likes
1
Downloads
29
Comments
0

10 Embeds 1,351

http://www.buunguyen.net 1206
http://buunguyen.net 79
http://cms.kms-technology.com 33
http://cms.kms.com.vn 13
http://www.slideshare.net 11
http://sotayblog.com 4
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 Combres Presentation Transcript

    • 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