由于默认的 ASP.NET MVC 模板使用了 Bundle 技术，大家开始接受并喜欢上这种技术。Bundle 技术通过 Micorosoft.AspNet.Web.Optimization 包实现，如果在 ASP.NET WebForm 项目中引入这个包及其依赖包，在 ASP.NET WebForm 项目中使用 Bundle 技术也非常容易。

---

关于在 WebForm 中使用 Bundle 技术的简短说明

通过 NuGet 很容易在 WebForm 项目中引入Microsoft.AspNet.Web.Optimization包及其依赖包。不过在 MVC 项目的 Razor 页面中可以使用类似下面的语句引入资源

@Scripts.Render("...")

而在*.aspx页面中则需要通过<%= %>来引入了：

<%@ImportNamespace="System.Web.Optimization"%>//...<%=Scripts.Render("...")%>

备注有些资料中是使用的<%: %>，我实在没有发现它和<%= %>有啥区别，但至少我在《ASP.NET Reference》的《Code Render Blocks》一节找到了<%= %>，却暂时没在官方文档里找到<%: %>

---

然后，我在一个使用了 EasyUI 的项目中使用了 Bundle 技术。才开始一切正常，至到第一个 Release 版本测试的那一天，“血案”发生了——

由于一个脚本错误，EasyUI 没有生效。最终原因是 Bunlde 在 Release 版中将 EasyUI 的脚本压缩了——当然，定位到这个原因还是经历了一翻周折，这就不细说了。

这个解决方案理论上只需要在配置里加一句话就行：

BundleTable.EnableOptimizations=false;

但问题在于，这样一来，为了一个 EasyUI，就放弃了所有脚本的压缩，而仅仅只是合并，效果折半，只能当作万不得已的备选。

先看看原本的 Bundle 配置（已简化）

publicstaticvoidRegister(BundleCollectionbundles){bundles.Add(newScriptBundle("~/libs").Include("~/scripts/jquery-{version}.js").Include("~/scripts/jquery.eaysui-{versoin}.js").Include("~/scripts/locale/easyui-lang-zh_CN.js").IncludeDirectory("~/scripts/app","*.js",true));}

这段配置先引入了 jquery，再引入了 easyui，最后引入了一些为当前项目写的公共脚本。为了实现解决方案二，必须要改成分三个 Bundle 引入，同时还得想办法阻止压缩其中一个 Bundle。

要分段，简单

publicstaticvoidRegister(BundleCollectionbundles){bundles.Add(newScriptBundle("~/jquery").Include("~/scripts/jquery-{version}.js"));bundles.Add(newScriptBundle("~/easyui").Include("~/scripts/jquery.eaysui-{versoin}.js").Include("~/scripts/locale/easyui-lang-zh_CN.js"));bundles.Add(newScriptBundle("~/libs").IncludeDirectory("~/scripts/app","*.js",true));}

但为了阻止压缩，查了文档，也搜索了不少资料都没找到解决办法，所以只好看源码分析了，请出 JetBrains dotPeek。分析代码之后得出结论，只需要去掉默认的 Transform 就行

//bundles.Add(newScriptBundle("~/easyui")//.Include("~/scripts/jquery.eaysui-{versoin}.js")//.Include("~/scripts/locale/easyui-lang-zh_CN.js")//);BundleeasyuiBundle=newScriptBundle("~/easyui").Include("~/scripts/jquery.eaysui-{versoin}.js").Include("~/scripts/locale/easyui-lang-zh_CN.js"));easyuiBundle.Transforms.Clear();bundles.Add(easyuiBundle);

---

关键代码的分析说明

首先从 ScriptBunlde入手

publicclassScriptBundle:Bundle{publicScriptBundle(stringvirtualPath):this(virtualPath,(string)null){}publicScriptBundle(stringvirtualPath,stringcdnPath):base(virtualPath,cdnPath,(IBundleTransform)newJsMinify()){this.ConcatenationToken=";"+Environment.NewLine;}}

可以看出，ScriptBunlde 的构建最终是通过其基类Bunlde中带IBunldeTransform参数的那一个来构造的。再看Bunlde的关键代码

publicclassBunldepublicIList<IBundleTransform>Transforms{get{returnthis._transforms;}}publicBundle(stringvirtualPath,stringcdnPath,paramsIBundleTransform[]transforms){//...foreach(IBundleTransformbundleTransformintransforms){this._transforms.Add(bundleTransform);}}}

容易理解，ScriptBunlde构建的时候往Transforms中添加了一默认的 Transform——JsMinify，从名字就可以看出来，这是用来压缩脚本的。而IBundleTransform只有一个接口方法

publicinterfaceIBundleTransform{voidProcess(BundleContextcontext,BundleResponseresponse);}

看样子它是在处理BundleResponse。而BundleResponse中定义有文本类型的Content和ContentType属性，以及一个IEnumerable<BundleFile> Files。

为什么是 Files 而不是 File 呢，我猜Content中包含的是一个Bundle中所有文件的内容，而不是某一个文件的内容。要验证也很容易，自己实现个IBundleTransform试下就行了

Bundleb=newScriptBundle("~/test").Include(...).Include(...);b.Transforms.Clear();b.Transforms.Add(newMyTransform())//MyTransform可以自由发挥，我其实啥都没写，只是在Process里打了个断点，检查了response的属性值而已

实验证明在BundleResponse传入Transforms之前，其Content就已经有所有引入文件的内容了。

---

方案二解决了方案一不能解决的问题，但同时也带来了新问题。原来只需要一句话就能引入所有脚本

@Scripts.Render("~/libs")

而现在需要 3 句话

@Scripts.Render("~/jquery")@Scripts.Render("~/easyui")@Scripts.Render("~/libs")

鉴于方案二带来的新问题，试想，如果有一个东西，能把 3 个 Bundle对象组合起来，变成一个 Bundle对象，岂不是就解决了？

于是，我发明了 Bundle 的 Bundle，不妨就叫BundleBundle吧。

publicclassBundleBundle:Bundle{readonlyList<Bundle>bundles=newList<Bundle>();publicBundleBundle(stringvirtualPath):base(virtualPath){}publicBundleBundleInclude(Bundlebundle){bundles.Add(bundle);returnthis;}//在引入Bundle对象时申明清空Transforms，这几乎就是为EasyUI准备的publicBundleBundleInclude(Bundlebundle,boolisClearTransform){if(isClearTransform){bundle.Transforms.Clear();}bundles.Add(bundle);returnthis;}publicoverrideBundleResponseGenerateBundleResponse(BundleContextcontext){List<BundleFile>allFiles=newList<BundleFile>();StringBuildercontent=newStringBuilder();stringcontentType=null;foreach(Bundlebinbundles){varr=b.GenerateBundleResponse(context);content.Append(r.Content);//考虑到BundleBundle可能用于CSS，所以这里进行一次判断，//只在ScriptBundle后面加分号（兼容ASI风格脚本）//这里可能会出现在已有分号的代码后面加分号的情况，//考虑到只会浪费1个字节，忍了if(bisScriptBundle){content.Append(';');}content.AppendLine();allFiles.AddRange(r.Files);if(contentType==null){contentType=r.ContentType;}}varresponse=newBundleResponse(content.ToString(),allFiles);response.ContentType=contentType;returnresponse;}}

使用BundleBundle也简单，就像这样

bundles.Add(newBundleBundle("~/libs").Include(newScriptBundle("~/bundle/jquery").Include("~/scripts/jquery-{version}.js")).Include(newScriptBundle("~/bundle/easyui").Include("~/scripts/jquery.easyui-{version}.js").Include("~/scripts/locale/easyui-lang-zh_CN.js")).Include(newScriptBundle("~/bundle/app").IncludeDirectory("~/scripts/app","*.js",true)));

然后

@Scripts.Render("~/libs")

注意，每个子Bundle都有名字，但这些名字不能直接给@Scripts.Render()使用，因为它们并没有直接加入BundleTable.Bundles中。但名字是必须的，而且不能是 null，不信就试试。