By DevDivChina
[原文发表地址] 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文件夹的捆绑的默认排序如以下所示：
- Jquery-1.6.2.js
- Jquery-ui.js
- Jquery.tools.js
- a.js
默认情况下，CSS文件也是通过字母排序的，然后前后移动，那样reset.css 和 normalize.css（如果它们存在的话）可以在其他文件之前先加载。所以Styles文件夹的捆绑的默认排序如以下所示：
- reset.css
- content.css
- forms.css
- globals.css
- menu.css
- 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
