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
posted @ 2021-01-28 08:48  清语堂  阅读(201)  评论(0)  编辑  收藏  举报