ASP.NET MVCBundling and minification提高页面加载速度

https://www.lanhusoft.com/Article/235.html

 

Bundling and minification是ASP.NET 4.5中可以用来提高页面加载速度的技术。 它通过减少向服务器请求的数量和请求资源文件大小（css、javascript等等）。 通常浏览器对一个主机host同时发请求都有限制，下表列出了常用的浏览器对于同时发送http请求的限制。

这个限制意味着多的请求将会进入队列排队等待，所以为了提供页面的加载速度，尽量的减少对服务器的请求数是一个不错的方案。在ASP.NET 4.5中为我们提供了一种新的特性，可以让我们把项目中多个静态资源（css,js）进行捆绑打包，将多个文件进行合并成一个文件并对文件进行压缩。更少的文件，意味着更少的http请求，这样可以提高页面的加载速度。

一、在ASP.NET mvc中启用Bundling和minification的效果

我们来看一下一个MVC程序中使用静态资源捆绑打包和压缩前后的变化。 未使用Bundling：

  使用Bundling之后：

未使用Minification：

1. AddAltToImg = function (imageTagAndImageID, imageContext) {
2. ///<signature>
3. ///<summary> Adds an alt tab to the image
4. // </summary>
5. //<param name="imgElement" type="String">The image selector.</param>
6. //<param name="ContextForImage" type="String">The image context.</param>
7. ///</signature>
8. var imageElement = $(imageTagAndImageID, imageContext);
9. imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
10. }

使用Minification之后：

1. AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

可以看到在使用了MVC的压缩Minification之后，把js文件中的注释、换行都去掉了，而且把参数和变量都用短的字符替换了。请求的文件变小了，服务器的带宽就减少，因此也减少对了服务器的压力。

二、在ASP.NET MVC中启用Bundling和minification

2.1、ASP.NET MVC中控制Bundling和minification启用方法

ASP.NET MVC中启用Bundling和minification方式有两种方式。 方法1、在Web.Config中compilation结点设置为false。

1. <system.web>
2. <compilation debug="false" />
3. <!-- 省略其它代码. -->
4. </system.web>

方法2、在代码中加如下面一行代码

1. public static void RegisterBundles(BundleCollection bundles)
2. {
3. bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
4. "~/Scripts/jquery-{version}.js"));
5.     BundleTable.EnableOptimizations = true;
6. }

2.2、ASP.NET MVC中使用Bundling和minification方法

打开项目中的App_Start\BundleConfig.cs文件里面有一个方法RegisterBundles就是用来注册要打包和压缩的资源文件。

1. public static void RegisterBundles(BundleCollection bundles)
2. {
3. bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
4. "~/Scripts/jquery-{version}.js"));
5. // 省略其它代码
6.      BundleTable.EnableOptimizations = true;
7. }

注意：除非EnableOptimizations被设置为true，或者在web.config中的debug设置为false。不然文件不会被打包和压缩，文件的.min版也不会被使用。
在web.config中的debug设置为false，可以在程序中用BundleTable.EnableOptimizations覆盖设置。也就是BundleTable.EnableOptimizations的设置的优先级更高。 上面代码创建了一个名为"~/bundles/jquery"的文件打包，其中包括文件"~/Scripts/jquery-{version}.js"，这里的“{version}”是一个占位符。 在视图中引用这个打包资源：

1. @Scripts.Render("~/bundles/jquery")

最后在html的的结果是：

1. <script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>

下面我们来对比一下在项目中使用了ASP.NET MVC中使用Jquery文件的Bundling和minification效果。 使用前：

使用后：

可以看到文件小了很多，因为它使用用的是ASP.NET MVC Bunding框架自动去找对应的min版或者把原来的文件进行压缩。 注意如果你对应的文件下有多个版本Jquery类库文件。比如：有jquery-1.10.2.js，jquery-1.10.2.min.js和jquery-1.11.2.js，jquery-1.11.2.min.js时它会把这两个版本的文件都合并成一个文件，因为ASP.NET MVC Bunding框架本身就有合并和压缩的功能，而且这些文件都匹配之前注册的文件："~/Scripts/jquery-{version}.js"。

2.3、ASP.NET MVC中Bundling和minification使用CDN

1. public static void RegisterBundles(BundleCollection bundles)
2. {
3. //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
4. // "~/Scripts/jquery-{version}.js"));
6. bundles.UseCdn = true; //enable CDN support
8. //add link to jquery on the CDN
9. var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
11. bundles.Add(new ScriptBundle("~/bundles/jquery",
12. jqueryCdnPath).Include(
13. "~/Scripts/jquery-{version}.js"));
15. // 省略其它代码
16. }

上面代码就使用了CDN，但是有一个问题是如果是在页面只使用cdn，当cdn不可用的时候页面使用Jquery相关的地方就要报错，我们应该提供一种CND的撤退机制，当CDN请求失败是，我们用本地Jquery类库文件替换。

1. @Scripts.Render("~/bundles/jquery")
3. <script type="text/javascript">
4. if (typeof jQuery == 'undefined') {
5. var e = document.createElement('script');
6. e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
7. e.type = 'text/javascript';
8. document.getElementsByTagName("head")[0].appendChild(e);
9. }
10. </script>

创建一个Bundle Bundle类的Include可以传多个资源文件如下： 

1. bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
2. "~/Content/themes/base/jquery.ui.core.css",
3. "~/Content/themes/base/jquery.ui.resizable.css",
4. "~/Content/themes/base/jquery.ui.selectable.css",
5. "~/Content/themes/base/jquery.ui.accordion.css",
6. "~/Content/themes/base/jquery.ui.autocomplete.css",
7. "~/Content/themes/base/jquery.ui.button.css",
8. "~/Content/themes/base/jquery.ui.dialog.css",
9. "~/Content/themes/base/jquery.ui.slider.css",
10. "~/Content/themes/base/jquery.ui.tabs.css",
11. "~/Content/themes/base/jquery.ui.datepicker.css",
12. "~/Content/themes/base/jquery.ui.progressbar.css",
13. "~/Content/themes/base/jquery.ui.theme.css"));

使用通配符“*”来选择多个文件 考虑到如下情况，当一个文件夹下有很多个js文件，除了像上面一样，在Inculde中全部指定，也可以用通配符“*”来选择多个文件。如项目中有如下文件结构： Scripts\Common\AddAltToImg.js Scripts\Common\ToggleDiv.js Scripts\Common\ToggleImg.js Scripts\Common\Sub1\ToggleLinks.js

调用	添加的文件
Include("~/Scripts/Common/*.js")	AddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/T*.js")	Invalid pattern exception. The wildcard character is only allowed on the prefix or suffix.
Include("~/Scripts/Common/*og.*")	Invalid pattern exception. Only one wildcard character is allowed.
"Include("~/Scripts/Common/T*")	ToggleDiv.js, ToggleImg.js
"Include("~/Scripts/Common/*")	Invalid pattern exception. A pure wildcard segment is not valid.
IncludeDirectory("~/Scripts/Common", "T*")	ToggleDiv.js, ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*",true)	ToggleDiv.js, ToggleImg.js, ToggleLinks.js

参考资料：http://www.asp.net/mvc/overview/performance/bundling-and-minification