Goal:
When loading js or css files, combine all the js files into one and all css files into one file respectively when rendering to improve on performance. Also compress if need be on the fly.
In this example we use many css files and even more js files to organize the ASP.Net Mvc web app into manageable pieces. The reason for the separation is mainly because it gives the team the ability to work on different part of the web app by working on the affected css or js files. It also helps to decide at a very granular level which css or js files to load and cache in the browser and which ones are very unique and/or specific and/or large so as to load only when really needed. For example I have an extremely large contract page with about 4000 lines of jQuery to handle a spreadsheet like functionality. It is not used often and used only by certain sales reps. Do not want to load this file as part of the generic/global js file since it would be wasted space for most part. This file is loaded on the fly when needed. How that is done is another story :-) Since my app is a CRM app, it has many screens that have unique css styling requirements and so in some situations the css file should only be loaded when needed. The reasons are really not that important in the context of this blog, just want to show you how to do this in ASP.Net Mvc if and when the need arises.
System Requirements:
.Net 2+
ASP.Net Mvc v1+
Solution:
In your Master file head section
<link rel="stylesheet" type="text/css" href="<%=Url.RouteUrl(new {controller = "Scripts", Action = "GetAllCss"})%>" />
<script type="text/javascript" src="<%=Url.RouteUrl(new {controller = "Scripts", Action = "GetAllScripts"})%>"></script>
In the Mvc ScriptController controller:
public static IPathMapper ServerPathMapper { get; set; }
protected static bool Enable;
protected static bool EnableHtmlCompression;
protected static bool EnableHtmlMinification;
protected static bool EnableProfiler;
protected static bool EnableScriptCompression;
protected static bool EnableScriptMinification;
protected string Css = "css";
protected string Js = "js";
[OutputCacheAttribute(CacheProfile = "Scripts")]
public FileResult GetAllScripts()
{
StringBuilder sb = LoadjQueryScripts();
sb.Append(LoadCRMScripts());
return StreamText(sb.ToString(), Js);
}
[OutputCacheAttribute(CacheProfile = "CRMScripts")]
public static StringBuilder LoadjQueryScripts()
{
string min = "";
if (ScriptOptimizerConfig.EnableMinimizedFileLoad)
min = "Min/";
var sb = new StringBuilder(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Base/{0}", min), FileType.js));
//var sb = new StringBuilder(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/{0}", min), FileType.js));
sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/{0}", min), FileType.js));
sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.grid/{0}", min), FileType.js));
sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.datepick/{0}", min), FileType.js));
sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.flot/{0}", min), FileType.js));
return sb;
}
[OutputCacheAttribute(CacheProfile = "CRMScripts")]
public static StringBuilder LoadCRMScripts()
{
string pathForCRMScripts = GetPathForCRMScripts();
if (ScriptOptimizerConfig.EnableMinimizedFileLoad)
{
string newPathForCRM = pathForCRMScripts + "Min/";
if (Directory.Exists(ServerMapPath(newPathForCRM)))
pathForCRMScripts = newPathForCRM;
}
var sb = new StringBuilder(GetFile(pathForCRMScripts, "CRMScripting.js"));
sb.Append(GetFile(pathForCRMScripts, "CRMScriptingAccount.js"));
sb.Append(GetFile(pathForCRMScripts, "CRMScriptingContact.js"));
sb.Append(GetFile(pathForCRMScripts, "CRMScriptingCallSheet.js"));
return sb;
}
public FileStreamResult StreamText(string inputText, IEquatable<string> name)
{
if (name.Equals(Js) && ScriptOptimizerConfig.Enable && ScriptOptimizerConfig.EnableScriptMinification)
inputText = new JavaScriptCompressor(inputText, false).Compress();
if (name.Equals(Css) && ScriptOptimizerConfig.Enable && ScriptOptimizerConfig.EnableCssMinification)
inputText = CssCompressor.Compress(inputText, 0, CssCompressionType.MichaelAshRegexEnhancements);
var m = new MemoryStream(Encoding.Default.GetBytes(inputText));
return File(m, name.Equals(Css) ? "text/css" : "text/javascript");
}
public static string CombineLikeDirectoryFiles(string directory, FileType typeOfFile)
{
string combinedFiles = string.Empty;
string extension = null;
switch (typeOfFile)
{
case FileType.js:
extension = "js";
if (ScriptOptimizerConfig.EnableMinimizedFileLoad)
{
string newPath = string.Format("{0}{1}", directory, directory.EndsWith("/") ? "Min" : "/Min");
if (Directory.Exists(ServerMapPath(newPath)))
directory = newPath;
}
break;
case FileType.css:
extension = "css";
break;
}
if(extension == null)
return null;
if (GetFiles(directory, extension) != null)
{
foreach (FileInfo file in GetFiles(directory, extension))
{
using (var s = new StreamReader(file.FullName))
combinedFiles += s.ReadToEnd();
}
} return combinedFiles;
}
public static string GetFile(string pathForCRMScripts, string file)
{
if (ServerPathMapper != null)
{
string fullFilePath = ServerPathMapper.MapPath(pathForCRMScripts) + file;
if (!System.IO.File.Exists(fullFilePath))
return null;
using (var s = new StreamReader(fullFilePath))
return s.ReadToEnd();
}
return null;
}
public static IList<FileInfo> GetFiles(string serverPath, string extention)
{
string path = ServerMapPath(serverPath);
if (!Directory.Exists(path))
return null;
IList<FileInfo> files = new List<FileInfo>();
string[] fileNames = Directory.GetFiles(path, "*." + extention, SearchOption.TopDirectoryOnly);
foreach (string name in fileNames)
files.Add(new FileInfo(name));
return files;
}
public static string ServerMapPath(string serverPath)
{
if (!serverPath.StartsWith("~/"))
{
if (serverPath.StartsWith("/"))
serverPath = "~" + serverPath;
else
serverPath = "~/" + serverPath;
}
if (ServerPathMapper != null)
{
string path = ServerPathMapper.MapPath(serverPath);
if (!path.EndsWith("/"))
path = path + "/";
return path;
}
return null;
}
public static string GetPathForCRMScripts()
{
return "~/Scripts/CRM/";
}
public interface IPathMapper
{
string MapPath(string relativePath);
string MapPath();
}
The IPathMapper is injected via the ScriptController's constructor via IoC with Castle Windsor's windsor.boo config file:
Component "pathMapper", IPathMapper, Vert.CRM.UI.Mechanics.ServerPathMapper
public class ServerPathMapper : IPathMapper
{
private readonly string _relativePath;
public ServerPathMapper()
{
}
public ServerPathMapper(string relativePath)
{
_relativePath = relativePath;
}
#region Implementation of IPathMapper
public string MapPath(string relativePath)
{
return HttpContext.Current.Server.MapPath(relativePath);
}
public string MapPath()
{
if (_relativePath != null)
if (HttpContext.Current != null) return HttpContext.Current.Server.MapPath(_relativePath);
return null;
}
#endregion
}
The static properties to enable profiler, compression, minification is set by using the ScriptOptimizerSection class which inherits from ConfigurationSection:
public class ScriptOptimizerSection : ConfigurationSection {
[ConfigurationProperty("enable", IsRequired = true)]
public bool Enable {
get { return (bool)this["enable"]; }
set { this["enable"] = value; }
}
[ConfigurationProperty("enableProfiler", IsRequired = true)]
public bool EnableProfiler {
get { return (bool)this["enableProfiler"]; }
set { this["enableProfiler"] = value; }
}
[ConfigurationProperty("enableScriptCompression", IsRequired = true)]
public bool EnableScriptCompression {
get { return (bool)this["enableScriptCompression"]; }
set { this["enableScriptCompression"] = value; }
}
[ConfigurationProperty("enableHtmlCompression", IsRequired = true)]
public bool EnableHtmlCompression {
get { return (bool)this["enableHtmlCompression"]; }
set { this["enableHtmlCompression"] = value; }
}
[ConfigurationProperty("enableScriptMinification", IsRequired = true)]
public bool EnableScriptMinification {
get { return (bool)this["enableScriptMinification"]; }
set { this["enableScriptMinification"] = value; }
}
[ConfigurationProperty("enableHtmlMinification", IsRequired = true)]
public bool EnableHtmlMinification {
get { return (bool)this["enableHtmlMinification"]; }
set { this["enableHtmlMinification"] = value; }
}
[ConfigurationProperty("enableCssMinification", IsRequired = true)]
public bool EnableCssMinification {
get { return (bool)this["enableCssMinification"]; }
set { this["enableCssMinification"] = value; }
}
[ConfigurationProperty("enableMinimizedFileLoad", IsRequired = true)]
public bool EnableMinimizedFileLoad
{
get { return (bool)this["enableMinimizedFileLoad"]; }
set { this["enableMinimizedFileLoad"] = value; }
}
}
public class ScriptOptimizerConfig {
protected static bool enable;
protected static bool enableProfiler;
protected static bool enableScriptCompression;
protected static bool enableHtmlCompression;
protected static bool enableScriptMinification;
protected static bool enableHtmlMinification;
protected static bool enableCssMinification;
protected static bool enableMinimizedFileLoad;
/// <summary>
///
/// </summary>
static ScriptOptimizerConfig() {
ScriptOptimizerSection section;
section = (ScriptOptimizerSection)ConfigurationManager.GetSection("OptimizeClientSide");
if (section != null)
{
enable = section.Enable;
enableProfiler = section.EnableProfiler;
enableScriptCompression = section.EnableScriptCompression;
enableHtmlCompression = section.EnableHtmlCompression;
enableScriptMinification = section.EnableScriptMinification;
enableHtmlMinification = section.EnableHtmlMinification;
enableCssMinification = section.EnableCssMinification;
enableMinimizedFileLoad = section.EnableMinimizedFileLoad;
}
}
/// <summary>
///
/// </summary>
public static bool Enable {
get { return enable; }
}
/// <summary>
///
/// </summary>
public static bool EnableProfiler {
get { return enableProfiler; }
}
/// <summary>
///
/// </summary>
public static bool EnableScriptCompression {
get { return enableScriptCompression; }
}
/// <summary>
///
/// </summary>
public static bool EnableHtmlCompression {
get { return enableHtmlCompression; }
}
/// <summary>
///
/// </summary>
public static bool EnableScriptMinification {
get { return enableScriptMinification; }
}
/// <summary>
///
/// </summary>
public static bool EnableMinimizedFileLoad
{
get { return enableMinimizedFileLoad; }
}
/// <summary>
///
/// </summary>
public static bool EnableHtmlMinification {
get { return enableHtmlMinification; }
}
public static bool EnableCssMinification
{
get { return enableCssMinification; }
}
}
The web.config file settings for optimization settings:
<configuration>
<configSections>
<sectionGroup name="elmah">
<section name="errorLog" type="Elmah.ErrorLogSectionHandler,Elmah" />
</sectionGroup>
<section name="OptimizeClientSide" type="Vert.CRM.Core.Utility.ScriptOptimizerSection, Vert.CRM.Core" />
....
<OptimizeClientSide enable="false"
enableScriptCompression="false"
enableHtmlCompression="false"
enableScriptMinification="false"
enableMinimizedFileLoad="true"
enableHtmlMinification="false"
enableCssMinification="false"
enableProfiler="false">
</OptimizeClientSide>
