zoukankan      html  css  js  c++  java
  • 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_StartBundleConfig.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中全部指定,也可以用通配符“*”来选择多个文件。如项目中有如下文件结构:
    ScriptsCommonAddAltToImg.js
    ScriptsCommonToggleDiv.js
    ScriptsCommonToggleImg.js
    ScriptsCommonSub1ToggleLinks.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
  • 相关阅读:
    DDD 领域驱动设计-谈谈 Repository、IUnitOfWork 和 IDbContext 的实践
    UVA10071 Back to High School Physics
    UVA10071 Back to High School Physics
    UVA10055 Hashmat the Brave Warrior
    UVA10055 Hashmat the Brave Warrior
    UVA458 The Decoder
    UVA458 The Decoder
    HDU2054 A == B ?
    HDU2054 A == B ?
    POJ3414 Pots
  • 原文地址:https://www.cnblogs.com/wfy680/p/14337940.html
Copyright © 2011-2022 走看看