编程语言
首页 > 编程语言> > ASP.NET MVCBundling and minification提高页面加载速度

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"));
  5. bundles.UseCdn = true; //enable CDN support
  6. //add link to jquery on the CDN
  7. var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
  8. bundles.Add(new ScriptBundle("~/bundles/jquery",
  9. jqueryCdnPath).Include(
  10. "~/Scripts/jquery-{version}.js"));
  11. // 省略其它代码
  12. }
上面代码就使用了CDN,但是有一个问题是如果是在页面只使用cdn,当cdn不可用的时候页面使用Jquery相关的地方就要报错,我们应该提供一种CND的撤退机制,当CDN请求失败是,我们用本地Jquery类库文件替换。
  1. @Scripts.Render("~/bundles/jquery")
  2. <script type="text/javascript">
  3. if (typeof jQuery == 'undefined') {
  4. var e = document.createElement('script');
  5. e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
  6. e.type = 'text/javascript';
  7. document.getElementsByTagName("head")[0].appendChild(e);
  8. }
  9. </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

标签:jquery,文件,ASP,bundles,js,minification,Scripts,NET,css
来源: https://www.cnblogs.com/wfy680/p/14337940.html