一、简介
在对网站进行开发时，为了给开发人员以好的可读性，需要对代码进行良好的排版，给变量起有意义的名字，进行合理的注释。然而，当网页呈现在用户面前时，之前提及的都不再重要，而另一方面，网页的呈现速度则变得很重要，这时候，又需要对代码进行压缩（以减少文件大小，节省网络带宽，从而加快了页面的加载时间），删掉不必要的空白字符，缩短变量名，删除注释等。如果网站上线后仍然一直处于持续更新状态，则每次在发布前压缩代码就变成了重复性的劳动。如何简化甚至省略掉这个重复性劳动呢？
二、解决方案一
使用外置的代码压缩程序，配置它在每次网站编译前执行。（这是一种简化重复性劳动的方法）
我看到微软项目中使用了一个Crunch.exe的程序，在网站项目配置它在每次编译前执行，专门用来压缩指定的js/css文件。这个方法的确可以奏效，但是我认为它有很多缺点：
- 要引用外置程序，这很讨厌
- 要在网站项目做配置，使得它在每次编译前执行
- 要维护一个xml文件，以指定哪些js/css文件需要压缩。这很不灵活，每次新增一个需要压缩的文件，都要去修改这个xml文件
- 要配置一些难记的命令
- 由于这个Crunch.exe程序的引入，使得网站项目所在的路径中，任何文件夹名不得含有空格！否则这个程序将会执行失败，导致整个项目的编译失败！这点最令人讨厌！我曾吃过亏，在一个微软项目(给MSN的客户NBC做的网站)中，某一天我发现好端端的网站工程，老是编译失败，百思不得其解，找了很久才发现是由于这个原因！
三、解决方案二
使用HttpHandler，针对js/css文件的请求，给予压缩响应。（这从根本上省掉了发布网站前的代码压缩工作！）
这个是我从BlogEngine.NET项目中学来的。分别写好JavaScriptHandler和CssHandler，再在Web.Config中做配置，将对js文件的请求，交由JavaScriptHandler来处理，而将对css文件的请求，交由CssHandler处理。
四、解决方案二原理剖析
这个解决方案的两个Handler，分别对js文件和css文件进行压缩，不用担心影响服务器性能，因为它设置了缓存，除非源文件有修改，否则就一直调用压缩好的缓存版代码给予响应，所以针对同一代码文件的所有请求，只需要压缩一次。
这两个Handler还会对请求的查询字符串进行检查，看看是否有?minify=true这样的查询字符串存在，如果有才压缩，如果没有就不压缩。这是一个非常灵活的做法，即你可以在网站中灵活地配置是否要压缩某个代码文件。也就是说，只要你配置minify=true，则用户浏览你的网页时会非常快。如果他/她感觉你的网站很酷，想要学习一下，那么它会去查看你的源代码，这时候，他/她只需要将minify=true删除，便能够查看到你的开发版代码（可读性非常好）。（当然，如果你不愿意分享，则不要采用这种方式，你可以采用解决方案一）
对于JavaScriptHandler，这里引用了一个JavascriptMinifier的工具类。在下面的实现一节里给出了它的源代码。
五、解决方案二的实现
1. 引用JavaScriptMinifier类，下面给出它的源码，你可以直接添加到你的网站工程中。这里将它封装在了zizhujy.Utility命名空间内，你也可以修改成你自己的命名空间，只要在后面引用时也作相应修改就好。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Ajax.Utilities;
namespace zizhujy.Utility
{
/// <summary>
/// Helper class for performing minification of Javascript and CSS.
/// </summary>
/// <remarks>
///
/// This class is basically a wrapper for the AjaxMin library(lib/AjaxMin.dll).
/// http://ajaxmin.codeplex.com/
///
/// There are no symbols that come with the AjaxMin dll, so this class gives a bit of intellisense
/// help for basic control. AjaxMin is a pretty dense library with lots of different settings, so
/// everyone's encouraged to use it directly if they want to.
///
/// </remarks>
public sealed class JavascriptMinifier
{
private Microsoft.Ajax.Utilities.Minifier ajaxMinifier = new Microsoft.Ajax.Utilities.Minifier();
/// <summary>
/// Creates a new Minifier instance.
/// </summary>
public JavascriptMinifier()
{
this.RemoveWhitespace = true;
this.PreserveFunctionNames = true;
this.VariableMinification = VariableMinification.None;
}
#region "Methods"
/// <summary>
/// Builds the required CodeSettings class needed for the Ajax Minifier.
/// </summary>
/// <returns></returns>
private CodeSettings CreateCodeSettings()
{
var codeSettings = new CodeSettings();
codeSettings.MinifyCode = false;
codeSettings.OutputMode = (this.RemoveWhitespace ? OutputMode.SingleLine : OutputMode.MultipleLines);
// MinifyCode needs to be set to true in order for anything besides whitespace removal
// to be done on a script.
codeSettings.MinifyCode = this.ShouldMinifyCode;
if (this.ShouldMinifyCode)
{
switch (this.VariableMinification)
{
case VariableMinification.None:
codeSettings.LocalRenaming = LocalRenaming.KeepAll;
break;
case VariableMinification.LocalVariablesOnly:
codeSettings.LocalRenaming = LocalRenaming.KeepLocalizationVars;
break;
case VariableMinification.LocalVariablesAndFunctionArguments:
codeSettings.LocalRenaming = LocalRenaming.CrunchAll;
break;
}
// This is being set by default. A lot of scripts use eval to parse out various functions
// and objects. These names need to be kept consistant with the actual arguments.
codeSettings.EvalTreatment = EvalTreatment.MakeAllSafe;
// This makes sure that function names on objects are kept exactly as they are. This is
// so functions that other non-minified scripts rely on do not get renamed.
codeSettings.PreserveFunctionNames = this.PreserveFunctionNames;
}
return codeSettings;
}
/// <summary>
/// Gets the minified version of the passed in script.
/// </summary>
/// <param name="script"></param>
/// <returns></returns>
public string Minify(string script)
{
if (this.ShouldMinify)
{
if (String.IsNullOrEmpty(script))
{
return string.Empty;
}
else
{
return this.ajaxMinifier.MinifyJavaScript(script, this.CreateCodeSettings());
}
}
return script;
}
#endregion
#region "Properties"
/// <summary>
/// Gets or sets whether this Minifier instance should minify local-scoped variables.
/// </summary>
/// <remarks>
///
/// Setting this value to LocalVariablesAndFunctionArguments can have a negative impact on some scripts.
/// Ex: A pre-minified jQuery will fail if passed through this.
///
/// </remarks>
public VariableMinification VariableMinification { get; set; }
/// <summary>
/// Gets or sets whether this Minifier instance should preserve function names when minifying a script.
/// </summary>
/// <remarks>
///
/// Scripts that have external scripts relying on their functions should leave this set to true.
///
/// </remarks>
public bool PreserveFunctionNames { get; set; }
/// <summary>
/// Gets or sets whether the <see cref="BlogEngine.Core.JavascriptMinifier"/> instance should remove
/// whitespace from a script.
/// </summary>
public bool RemoveWhitespace { get; set; }
private bool ShouldMinifyCode
{
get
{
// return true;
return ((!PreserveFunctionNames) || (this.VariableMinification != VariableMinification.None));
}
}
private bool ShouldMinify
{
get
{
return ((this.RemoveWhitespace) || (this.ShouldMinifyCode));
}
}
#endregion
}
/// <summary>
/// Represents the way variables should be minified by a Minifier instance.
/// </summary>
public enum VariableMinification
{
/// <summary>
/// No minification will take place.
/// </summary>
None = 0,
/// <summary>
/// Only variables that are local in scope to a function will be minified.
/// </summary>
LocalVariablesOnly = 1,
/// <summary>
/// Local scope variables will be minified, as will function parameter names. This can have a negative impact on some scripts, so test if you use it!
/// </summary>
LocalVariablesAndFunctionArguments = 2
}
}
2. 在网站工程中添加JavaScriptHandler类，下面给出它的源码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Security;
using System.Web.Caching;
using zizhujy.Utility;
using System.Net;
namespace zizhujy.HttpHandlers
{
/// <summary>
/// Removes whitespace in all stylesheets added to the handler of the HTML document
/// </summary>
/// <remarks>
///
/// This handler uses an external library to perform minification of scripts.
/// See the zizhujy.Utility.JavascriptMinifier class for more details.
///
/// </remarks>
public class JavaScriptHandler : IHttpHandler
{
#region Properties
/// <summary>
/// Gets a value indicating whether another request can use the <see cref="T:System.Web.IHttpHandler"></see> instance.
/// </summary>
/// <value></value>
/// <returns>true if the <see cref="T:System.Web.IHttpHandler"/> instance is reusable; otherwise, false.</returns>
public bool IsReusable
{
get { return false; }
}
#endregion
#region Implemented Interfaces
/// <summary>
/// Enables processing of HTTP Web requests by a custom
/// HttpHandler that implements the <see cref="T:System.Web.IHttpHandler"/> interface.
/// </summary>
/// <param name="context">
/// An <see cref="T:System.Web.HttpContext"/> object that provides
/// references to the intrinsic server objects
/// (for example, Request, Response, Session, and Server) used to service HTTP requests.
/// </param>
public void ProcessRequest(HttpContext context)
{
var request = context.Request;
string path = request.Path;
if (string.IsNullOrEmpty(path))
{
return;
}
string rawUrl = request.RawUrl.Trim();
string cacheKey = context.Server.HtmlDecode(rawUrl);
string script = (string)context.Cache[cacheKey];
bool minify = ((request.QueryString["minify"] != null) && (request.QueryString["minify"].ToString().Trim() != "false"));
if (string.IsNullOrEmpty(script))
{
script = RetrieveLocalScript(path, cacheKey, minify);
}
if (string.IsNullOrEmpty(script))
{
return;
}
SetHeaders(script.GetHashCode(), context);
context.Response.Write(script);
}
#endregion
#region Methods
/// <summary>
/// Retrieves the local script from the disk
/// </summary>
/// <param name="file">The file name.</param>
/// <param name="cacheKey">The key used to insert this script into the cache.</param>
/// <param name="minify">Whether or not the local script should be minified</param>
/// <returns>The retrieved local script.</returns>
private static string RetrieveLocalScript(string file, string cacheKey, bool minify)
{
if(StringComparer.OrdinalIgnoreCase.Compare(Path.GetExtension(file), ".js") != 0) {
throw new SecurityException("No access");
}
try{
var path = HttpContext.Current.Server.MapPath(file);
if(File.Exists(path)){
string script;
using (var reader = new StreamReader(path)){
script = reader.ReadToEnd();
}
script =ProcessScript(script, file, minify);
HttpContext.Current.Cache.Insert(cacheKey, script, new CacheDependency(path));
return script;
}
}catch(Exception ex) {
}
return string.Empty;
}
/// <summary>
/// Call this method for any extra processing that needs to be done on a script resource before
/// being wriiten to the response.
/// </summary>
/// <param name="script"></param>
/// <param name="filePath"></param>
/// <param name="shouldMinify"></param>
/// <returns></returns>
private static string ProcessScript(string script, string filePath, bool shouldMinify)
{
if ((shouldMinify))
{
var min = new JavascriptMinifier();
min.VariableMinification = VariableMinification.LocalVariablesOnly;
return min.Minify(script);
}
else
{
return script;
}
}
private static void SetHeaders(int hash, HttpContext context)
{
var response = context.Response;
response.ContentType = "text/jvascript";
var cache = response.Cache;
cache.VaryByHeaders["Accept-Encoding"] = true;
cache.SetExpires(DateTime.Now.ToUniversalTime().AddDays(7));
cache.SetMaxAge(new TimeSpan(7, 0, 0, 0));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
var etag = string.Format("\"{0}\"", hash);
var incomingEtag = context.Request.Headers["If-None-Match"];
cache.SetETag(etag);
cache.SetCacheability(HttpCacheability.Public);
if (string.Compare(incomingEtag, etag) != 0)
{
return;
}
response.Clear();
response.StatusCode = (int)HttpStatusCode.NotModified;
response.SuppressContent = true;
}
#endregion
}
}
3. 在网站工程中添加CssHandler类，下面给出它的源码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Security;
using System.Web.Caching;
using System.Text.RegularExpressions;
using System.Net;
namespace zizhujy.HttpHandlers
{
/// <summary>
/// Removes whitespace in all stylesheets added to the header of the HTML document.
/// </summary>
public class CssHandler : IHttpHandler
{
#region Properties
/// <summary>
/// Gets a value indicating whether another request can use the <see cref="T:System.Web.IHttpHandler"></see> instance.
/// </summary>
/// <value></value>
/// <returns>true if the <see cref="T:System.Web.IHttpHandler"/> instance is reusable; otherwise, false.</returns>
public bool IsReusable
{
get
{
return false;
}
}
#endregion
#region Implemented Interfaces
/// <summary>
/// Enables processing of HTTP Web request by a custom
/// HttpHandler that implements the <see cref="T:System.Web.IHttpHandler"/> interface.
/// </summary>
/// <param name="context">
/// An <see cref="T:System.Web.HttpContext"/> object that provides
/// references to the intrinsic server objects
/// (for example, Request, Response, Session, and Server) used to server HTTP requests.
/// </param>
public void ProcessRequest(HttpContext context)
{
var request = context.Request;
string path = request.Path;
if (!string.IsNullOrEmpty(path))
{
if (StringComparer.InvariantCultureIgnoreCase.Compare(Path.GetExtension(path), ".css") != 0)
{
throw new SecurityException("Invalid CSS file extension");
}
string cacheKey = request.RawUrl.Trim();
string css = (string)context.Cache[cacheKey];
bool minify = ((request.QueryString["minify"] != null) && (request.QueryString["minify"].ToString().Trim() != "false"));
if (String.IsNullOrEmpty(css))
{
css = RetrieveLocalCss(path, cacheKey, minify);
}
// Make sure css isn't empty
if (!string.IsNullOrEmpty(css))
{
// Configure response headers
SetHeaders(css.GetHashCode(), context);
context.Response.Write(css);
}
else
{
context.Response.Status = "404 Bad Request";
}
}
}
#endregion
#region Methods
/// <summary>
/// This will make the browser and server keep the output
/// in its cache and thereby improve performance.
/// </summary>
/// <param name="hash">
/// The hash number.
/// </param>
/// <param name="context">
/// The context.
/// </param>
private static void SetHeaders(int hash, HttpContext context)
{
var response = context.Response;
response.ContentType = "text/css";
var cache = response.Cache;
cache.VaryByHeaders["Accept-Encoding"] = true;
cache.SetExpires(DateTime.Now.ToUniversalTime().AddDays(7));
cache.SetMaxAge(new TimeSpan(7, 0, 0, 0));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
var etag = string.Format("\"{0}\"", hash);
var incomingEtag = context.Request.Headers["If-None-Match"];
cache.SetETag(etag);
cache.SetCacheability(HttpCacheability.Public);
if (String.Compare(incomingEtag, etag) != 0)
{
return;
}
response.Clear();
response.StatusCode = (int)HttpStatusCode.NotModified;
response.SuppressContent = true;
}
/// <summary>
/// Retrieves the local CSS from the disk
/// </summary>
/// <param name="file">
/// The file name.
/// </param>
/// <param name="cacheKey">
/// The key used to insert this script into the cache.
/// </param>
/// <returns>
/// The retrieve local css.
/// </returns>
private static string RetrieveLocalCss(string file, string cacheKey, bool minify)
{
var path = HttpContext.Current.Server.MapPath(file);
try
{
string css;
using (var reader = new StreamReader(path))
{
css = reader.ReadToEnd();
}
css = ProcessCss(css, minify);
HttpContext.Current.Cache.Insert(cacheKey, css, new CacheDependency(path));
return css;
}
catch
{
return string.Empty;
}
}
/// <summary>
/// Call this method to do any post-processing on the css before its returned in the context response.
/// </summary>
/// <param name="css"></param>
/// <returns></returns>
private static string ProcessCss(string css, bool minify)
{
if (minify)
{
css = StripWhitespace(css);
return css;
}
else
{
return css;
}
}
/// <summary>
/// Strips the whitespace from any .css file.
/// </summary>
/// <param name="body">
/// The body string.
/// </param>
/// <returns>
/// The strip whitespace.
/// </returns>
private static string StripWhitespace(string body)
{
body = body.Replace(" ", " ");
body = body.Replace(Environment.NewLine, String.Empty);
body = body.Replace("\t", string.Empty);
body = body.Replace(" {", "{");
body = body.Replace(" :", ":");
body = body.Replace(": ", ":");
body = body.Replace(", ", ",");
body = body.Replace("; ", ";");
body = body.Replace(";}", "}");
// sometimes found when retrieving CSS remotely
body = body.Replace(@"?", string.Empty);
// body = Regex.Replace(body, @"/\*[^\*]*\*+([^/\*]*\*+)*/", "$1");
body = Regex.Replace(
body, @"(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,}(?= )|(?<=&ndsp;)\s{2,}(?=[<])", String.Empty);
// Remove comments from CSS
body = Regex.Replace(body, @"/\*[\d\D]*?\*/", string.Empty);
return body;
}
#endregion
}
}
4. 在Web.Config中作映射配置：
如果是IIS 7.5 或以上，则只需要作如下配置即可：
<?xml version="1.0" encoding="utf-8"?>
<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问
http://go.microsoft.com/fwlink/?LinkId=152368
-->
<configuration>
...
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules runAllManagedModulesForAllRequests="true"/>
<handlers>
<add name="ZiZhuJYJavaScriptHandler" path="*.js" verb="*" type="zizhujy.HttpHandlers.JavaScriptHandler, zizhujy" resourceType="Unspecified" preCondition="integratedMode"/>
<add name="ZiZhuJYCssHandler" path="*.css" verb="*" type="zizhujy.HttpHandlers.CssHandler, zizhujy" resourceType="Unspecified" preCondition="integratedMode"/>
</handlers>
</system.webServer>
...
</configuration>
如果是IIS 5.1，则要按这样的格式作配置：
<?xml version="1.0" encoding="utf-8"?>
<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问
http://go.microsoft.com/fwlink/?LinkId=152368
-->
<configuration>
...
<system.web>
<httpHandlers>
<add path="*.js" verb="*" type="zizhujy.HttpHandlers.JavaScriptHandler, zizhujy" validate="false"/>
<add path="*.css" verb="*" type="zizhujy.HttpHandlers.CssHandler, zizhujy" validate="false"/>
</httpHandlers>
</system.web>
...
</configuration>
5. 通过在需要压缩的文件名后面添加查询字符串?minify=true来启动压缩：
<!DOCTYPE html>
<html>
<head>
...
<link href="/Content/css/functionGraffitiStyle.css?minify=true" rel="stylesheet" type="text/css" />
<link href="/Scripts/syntaxhighlighter_3.0.83/styles/shCore.css?minify=true" rel="stylesheet" type="text/css" />
<link href="/Scripts/syntaxhighlighter_3.0.83/styles/shThemeDefault.css?minify=true" rel="Stylesheet" type="text/css" />
<script src="/Scripts/flot/jquery.flot.js?minify=true" type="text/javascript"></script>
<script src="/Scripts/FunctionGraffiti/jGraffiti-Math.js?minify=true" type="text/javascript"></script>
<script src="/Scripts/FunctionGraffiti/jGraffiti.js?minify=true" type="text/javascript"></script>
...
</head>
<body>
...
</body>
</html>
六、解决方案二的总结
个人认为解决方案二是代码压缩的最佳实践方案，它同时对开发人员和用户友好。和解决方案一相比，它有这些优点：
- 它是内包的，不需要引用外部的奇怪程序，封装性好
- 它不插手编译过程，它是在第一次响应请求时进行压缩，之后调用缓存版本
- 不用维护另外的xml文件，只需要对那些你想要压缩的文件名后面添加一个查询字符串?minify=true即可启动压缩
- ?minify=true这个查询字符串太直观太好记了
- 没有格外的文件夹名要求，因此不会因为它的失败引起奇怪的编译过程错误
七、相关文件下载
解决方案二需要在项目中引用一个DLL文件（AjaxMin.dll），请点击下面的链接下载：
AjaxMin.zip (115.25 kb)
[donate: www.zizhujy.com]