Web Optimization Helpers

Overview

Image that you are running the site in production environment and following best practices for client-side page performance optimization. You are using script or style bundling and minification approach to reduce size of assets to download decreasing time to load for the page.

  @System.Web.Optimization.Styles.Render("~/Content/css")

Let's assume that you received a bug report from the customer complaining that one of the page is not loading correctly. You navigate to the page and see something similar in console output:

Error 'b' is undefined in /bundles/js?v=P4j3J... Line 1: Column 45669

Question is now what? Looking at System.Web.Optimization.Styles|Scripts.Render() method source code we can see that eventually code is using BundleTable.EnableOptimizations property which on another hand is affecting all script or style rendering - it means that be enabled or disabling optimizations - you are affecting all site users. The case is that actually you want script or style optimization to be disabled only for your particular debugging request without affecting other site users. It means that you have to turn feature on or off conditionally.

Styles and Scripts conditional rendering

How many times there has been a requirement to include some social media tracking or similar analytical script fragment only in production environment in order to get rid of unnecessary noise in tracking systems. Starting from 1.3.1 version of FeatureSwitch.Web.Optimization it's possible to prevent style or script rendering at all. This could be done using RenderIf() method. If provided feature is enabled - script or style is rendered (result is the same as using ordinary Render). So currently you will get: a) rendering of style or script b) disabled bundling (because feature will be enabled and therefore bundling will be skipped). NB! I'm still search for best API to control both branches - to render script or style at all and to control bundling.

Just use one of overloads for styles:

@(FeatureSwitch.Web.Optimization.Styles.RenderIf<IsRemoteRequest>("~/Content/css"))

And for one for scripts:

@(FeatureSwitch.Web.Optimization.Scripts.RenderIf<IsRemoteRequest>("~/Scripts/tracking-script"))

Styles and Scripts conditional optimization

Using FeatureSwitch library it's easy possible to turn optimization on or off only for particular request. By using FeatureSwitch strategies you can define your own feature that relies on QueryString value. For instance:

  [QueryString(Key = "DisableStyleOptimization")]
  public class StyleOptimizationDisabled : BaseFeature
  {
  }

feature will be turned on when you are passing DisableStyleOptimization in query string like: .../site/?DisableStyleOptimization=true. Then you can render your scripts or styles using following helper class (styles):

@(FeatureSwitch.Web.Optimization.Styles.Render<StyleOptimizationDisabled>("~/Content/css"))

and similar for scripts:

@(FeatureSwitch.Web.Optimization.Scripts.Render<FEATURE>("~/bundles/modernizr"))

Local Debug environment

Behind the scenes if feature is not enabled FeatureSwitch.Web.Optimization library relies on System.Web.Optimization functionality meaning that locally if you are running site in debug environment (HttpContext.Current.IsDebuggingEnabled is returning true) scripts or styles will not be bundled.