ASP.NET MVC 4 BundleTable的捆绑技术

在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件，以提高网络加载速度和页面解析速度。更为重要的是通过捆绑可以解决IE浏览器的31个CSS文件连接的限制。IE浏览器有这样一个限制，就是一个页面加载的CSS文件的数量不能超过31个。不太清楚微软是怎么想的，总之如果一个页面中的CSS文件引用超过31个就有可能会出现问题。在做ASP.Net项目时很多时候会使用一些开源的javascript控件。无形中增加了css和javascript文件的引用。如果手工将这些css文件合并将给将来版本升级造成很大的麻烦。于是，我们只好小心翼翼的处理这些css文件在页面中的引用。

现在我们终于有一个以相对比较完美的解决方案来解决css文件和jiavascirpt文件给我们带来的麻烦，BundleTable捆绑技术很好的解决了这个问题。

什么是ASP.NET捆绑技术?

ASP.NET捆绑是ASP.NET 4.5的新功能，是System.Web.Optimization命名空间下的类实现。它提供了一些ASP.NET运行性能方面的优化，比如，一个页面可能有很多CSS/JS,通应用BundleTable类，可以帮我们将文件合并压缩代码优化成一个最理想的文件，然后输出到客户端，从而提高网络下载速度和页面的运行速度。

在MVC4.0 中，默认使用了捆绑技术，启用捆绑技术的方法就是在Global.asax中“BundleTable.Bundles.RegisterTemplateBundles();”，这行代码就是启用了模板捆绑，意思是将MVC4.0项目模板中自带的CSS和javascript文件进行捆绑。然而这句话并不是我们所需要的全部，因为，在一个MVC项目中除了模版自带的CSS和javascript文件之外，我们还要加入其他的更多的css和javascript文件。于是，微软又给我们提供了另一个方法：BundleTable.Bundles.EnableDefaultBundles();这个方法可以将项目中所有的css和javascript文件合并压缩。这时有一个问题出现了，把所有的css和javascript文件都捆绑是不是太浪费了。因为并不是每个页面都要用到所哟的css和javascript。所以这个方法并不是很好，除非项目很小，css和javascript文件很少的情况下可以使用。那么，有没有个好的方法来完成这个工作呢。这就是下面要介绍的方法。起个名字就叫“按需分配”吧。

我们可以将CSS和javascript分类压缩捆绑。

在这个例子中将加入MVCControlToolkit的TreeView所需要使用的css和javascript文件。

在Global.asax.cs文件的Application_Start方法中加入下面代码：

            //创建Bundle捆绑实例，指定为CssMinify捆绑Css文件。

            Bundle bundle = new Bundle("~/Content/TreeView.css", new CssMinify());

            //使用AddDirectory方法加入要捆绑的css文件，在这个方法中可以使用通配符捆绑目录下多个文件。也可以使用AddFile捆绑单个文件。
            bundle.AddDirectory("~/Content", "jquery.treeview.css", false, true);
            //bundle.AddFile("~/Content/jquery.treeview.css");

            //让后将Bundle实例加入BundleTable中。就完成了一个捆绑。下面的javascript捆绑与css捆绑一样，只是在创建Bundle实例是需要指定JsMinify。
            BundleTable.Bundles.Add(bundle);
            bundle = new Bundle("~/Scripts/TreeView.js", new JsMinify());
            bundle.AddDirectory("~/Scripts", "MVCControlToolkit.Controls-2.0.0.min.js", false, true);
            bundle.AddDirectory("~/Scripts", "MVCControlToolkit.Controls.Core-2.0.0.min.js ", false, true);
            bundle.AddDirectory("~/Scripts", "jquery.treeview.all-2.0.0.min.js", false, true);
            bundle.AddDirectory("~/Scripts", "globalize.min.js", false, true);
            BundleTable.Bundles.Add(bundle);

在Application_Start设置好捆绑之后，需要在相应的页面中实施捆绑。

在.cshtml文件中加入下面代码：

    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/TreeView.css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/TreeView.js")"></script>
这样，在页面中就可以使用css和javascript了。

需要注意的是在Application_Start创建捆绑时new Bundle("~/Content/TreeView.css", new CssMinify())的第一个虚拟路径参数的指定，虽然这个参数可以是任意路径。但是最好还是用真实的物理路径然后加一个标识名，比如new Bundle("~/Content/TreeView.css", new CssMinify())，就是物理路径“~/Content" + 标识名”TreeView.css“,之所以要这么做是因为，如果css中定义了背景图像，而背景图像的引用一般是通过相对路径引用的，如果创建捆绑时指定的虚拟路径不是css文件所在的虚拟路径，那么，css中的引用的背景图像将无法被找到。下图客户端捆绑后的文件的URL，如果Content路径换做别的路径，css类将无法找到其引用图像的位置。

上图以实际虚拟路径作为捆绑的虚拟路径

上图以任意虚构虚拟路径作为捆绑的虚拟路径

javascript捆绑也是这个道理，如果javascript文件中引用了另一个javascript文件，也有可能出现类似的问题。

也许将所有与css相关的图片，与javascript相关的所有javascript文件统统捆绑就不会出现上述问题，没试过不太清楚。