新捆绑和缩小支持（ASP.NET 4.5系列）

[原文发表地址]  New Bundling and Minification Support (ASP.NET 4.5 Series)

[原文发表时间] 2011-11-27 20:58

这是我的ASP.NET 4.5系列中的第六篇博文。

下一个.NET和Visual Studio的发布包含很多新特性和功能。在ASP.NET 4.5中，你将会看到很多真的非常好的关于Web 窗体、MVC的改进，以及关于二者构建基础的ASP.NET核心基础的改进。

今天的博文涵盖了我们在ASP.NET中为捆绑和缩小添加内置支持所做的一些工作，那些支持会便于提高应用程序的性能。这个功能可供所有的ASP.NET应用程序使用，包括ASP.NET MVC和ASP.NET Web 窗体解决方案。

捆绑和缩小的基础知识

随着越来越多的人使用移动设备在web上冲浪，让网站和构建的应用程序互相良好地配合变得越来越重要。我们已经尝试过在智能手机上加载网址——只是最后放弃了，因为它在慢速的移动电话网络上加载得很慢。如果您的网址/应用程序加载慢如那样的话，你可能因为性能差会失去潜在的客户。即使有强大的台式机，加载网址的时间和性能也对客户有很大的影响。

如今大多数网站是由多个JavaScript 和 CSS文件来独立文件和保持代码紧凑。从编码的角度来看，这是一个好的做法，然而它经常会给网站的整体性能带来负面效果。多个JavaScript 和 CSS文件需要多个从浏览器发出的HTTP请求，那样反过来会降低性能。

简单的示例

下面，我在IE9中打开了一个本地网站，并使用IE内置的F12 开发工具记录了网络流量，如下所示，此网站包含浏览器必须加载的5个CSS和4个JavaScript文件。目前每个文件都由浏览器分别发送请求，并由服务器返回结果，所需时间与文件的数量成正比，所以毫无疑问这个过程会花费大量的时间。

捆绑

ASP.NET 正在添加新的功能，来轻松地“捆绑”或“合并”多个CSS和JavaScript 文件到较少的HTTP请求中。这会让浏览器请求较少的文件，反过来就减少了获取它们所需的时间。以下是上述例子更新过的版本，它充分利用了新的捆绑功能（为JavaScript和CSS都只做了一次请求）

现在浏览器只需向服务器发送较少的请求。单个文件的内容被捆绑/合并入相同的回应中，但是文件内容保持不变。所以整个文件的大小和捆绑前是完全相同的。但是请注意即使在本地开发机器上（浏览器和服务器之间的网络延迟是最小的），此捆绑 CSS 和 JavaScript 文件行为仍然可以减少20%的整体页面加载时间。针对慢速网络的性能改进将会更明显。

缩小

下一个ASP.NET的发布也添加了一些新的功能，以减少或“缩小”下载内容的大小。这是从CSS和JavaScript中删除空白、注释和其他不必要字符的过程。这样会让文件变小，在浏览器中下载和加载时会更快。以下图表展示了使用捆绑和缩小时的性能改进：

 

即使在做我的本地开发机器上（其中网络延迟是最小的），我们现在也可以比当初启动时提高40%的性能。在慢速网络上（尤其是拥有国际性的客户），性能收益会更多。

在ASP.NET内部使用捆绑和缩小

即将发布的ASP.NET充分利用了项目内部的捆绑和缩小，可以看到像以上方案中的性能收益。它执行此操作的方法，可以无须在生成过程中运行自定义工具 — — ASP.NET添加了运行时支持来动态执行捆绑/缩小（缓存结果以确定性能是良好的）。这成就了一个真正清洁的开发体验，同时为使用这些新的功能提供了真正的便利。

假设我们有一个简单的项目，项目包含4个JavaScript 文件和6个CSS 文件：

捆绑和缩小.css文件

假设你想要引用上述“Styles” 文件夹下的所有样式表。现在你不得不添加多个CSS引用来获取它们——这将转化为6个单独的HTTP请求：

新的捆绑/缩小功能允许你捆绑和缩小Styles文件夹下所有的.CSS文件——只需发送一个URL请求到文件夹中（此例中为“styles”），并在它后面追加“/css” 路径。例如：

这将会让ASP.NET扫描目录，并捆绑和缩小.css文件，再返回一个包含了所有发送到浏览器的CSS 内容的HTTP响应。

您不必运行任何工具或预处理器来做到这一点。这将让您清晰地将CSS分离成单独的逻辑.css文件，保持一个非常清洁的开发体验——同时在运行时没有影响性能。同时Visual Studio设计器将设定新的捆绑/缩小逻辑——那样你在VS内部也将仍然获得一个WYSWIYG设计器体验。

捆绑和缩小JavaScript 文件

和上述CSS方法一样，如果我们想要捆绑和缩小所有的JavaScript到单个的回应中，我们可以发送一个URL请求到文件夹中（此例中为“scripts”），并在它后面追加“/js”路径：

这将会让ASP.NET扫描目录，并捆绑和缩小.js文件，再返回一个包含了所有发送到浏览器的JavaScript 内容的HTTP响应。再次——不需要自定义工具或生成步骤来做到这一点。它适用于所有的浏览器。

在捆绑中为文件排序

默认情况下，当文件通过ASP.NET捆绑时，它们将先以字母排序，正如它们在解决方案资源管理器中显示的一样。然后它们被自动地前后移动，那样像jQuery、MooTools 和 Dojo的已知库和自定义扩展可以在其他文件之前先加载。所以Scripts文件夹的捆绑的默认排序如以下所示：

1. Jquery-1.6.2.js
2. Jquery-ui.js
3. Jquery.tools.js
4. a.js

默认情况下，CSS文件也是通过字母排序的，然后前后移动，那样reset.css 和 normalize.css（如果它们存在的话）可以在其他文件之前先加载。所以Styles文件夹的捆绑的默认排序如以下所示：

1. reset.css
2. content.css
3. forms.css
4. globals.css
5. menu.css
6. styles.css

不过，排序是完全可自定义的，并可以更改以适用大多数使用情况和任何你喜欢的常用命名模式。不过，框外体验的目标是使用智能的默认排序。

支持任意数量的目录/子目录

在上述例子的应用程序中，我们只有单个的文件夹——“Scripts” 和 “Styles”。这适用于某些应用程序类型 （例如单个页面应用程序）。然而，在应用程序中，你经常需要多个CSS/JS捆绑——例如：一个“通用”捆绑，用来包括所有页面使用的核心JS 和CSS文件，然后是像特定页面或特定部分这类不是全局使用的文件。

你可以在项目中捆绑/缩小任意数量的目录或子目录——这将更容易构造代码， 同时使捆绑/缩小收益最大化。默认情况下，每个目录可以作为一个单独的 URL 地址捆绑来访问。

捆绑/缩小可扩展性

请记住：ASP.NET的捆绑和缩小支持具有可扩展性。而且过程中的每个部分都可以扩展或替换。

自定义规则

除了允许来自外部的基于目录的捆绑方式之外，ASP.NET 也支持通过使用我们即将公开的新的编程用API，来注册自定义捆绑。

以下代码演示了在应用程序的Global.asax 类中，如何使用代码来注册一个“customscript”捆绑。API允许你在非常细化的级别上添加/删除/筛选捆绑的文件：

上面的自定义捆绑可以被应用程序中的任何地方引用。使用以下<script>引用：

自定义过程

你也可以覆盖掉默认的CSS和JavaScript捆绑来支持你自己的捆绑文件的自定义进程（例如：自定义缩小规则，支持Saas, LESS 或 Coffeescript 语法,等等).

在上面例子中，我们指出，我们想要用自定义的MyJsTransform 和 MyCssTransform 类替换内置的缩小转换。它们分别归属于CSS 和 JavaScript 缩小器，并且可以添加额外的功能：

此可扩展性的最终结果是你可以在深层级别加入捆绑/缩小逻辑，并且可以做一些非常酷的事情。

实行捆绑和缩小的2分钟视频

Mads Kristensen 有一个很棒的90 秒视频，它展示了如何使用新的捆绑/缩小功能。你可以点击这儿观看90秒视频。

总结

ASP.NET的下一个发布中的新捆绑和缩小支持将更容易构建快速的web应用程序。它真的非常容易使用，而且不会对你现存的开发工作流程做很大的改变。它也支持丰富的可扩展性 API，来让你自定义你所想要的。

在基于应用程序的ASP.NET MVC、ASP.NET Web 窗体 和 ASP.NET Web 页面中，你可以轻松地利用这种新的支持。

希望这会对你有所帮助

Scott

说明：除了博客之外，我使用推特来快速发表博文以及分享链接。 我的推特是 @scottgu