当前主流浏览器限制客户端对同一域名只能以提倡6(PS:原文如此)个HTTP连接。 这意味,打开一个网页只能以加载6独HTTP请求,在与一个域名下任何的请将受浏览器在到要队列中。 在IE浏览器中本F12调出开发人员工具,切换到网标签,如下图所出示,显示的是一个实例网站关于HTTP资源要的气象。 

 灰色的快长条显示的是当前恳求等待的工夫,浏览器通过队来促成任何资源的逐一加载。 黄色的速度漫漫显示的是客户端与服务器建立请求所花的年华。 蓝色条显示的是现阶段资源从服务器下载了所花费的年月。 你得双击当前恳请查询详细情况。 例如,下图显示的凡加载/ Scripts/MyScripts/JavaScript6.js文件整个请求过程的详细情况。 

 图片 1

 上面的图被显示了脚下资源以开头事件备受受浏览器在了请求队列。因为浏览器同时要限制的影响,当前资源要待46毫秒就上一个HTTP请求才能实施时底呼吁。

合并

集合是ASP.NET 4.5遭到之初成效,使开发者很容易实现把多单公文合并成一个文本。 你可以实现CSS、javascript脚论及另外文件之汇合功能。合并多单公文表示减少了HTTP请求的个数,同时增强了页面的加载速度。

产图展示了被了剧本合并功能后打开该网站的HTTP请求情况。

 图片 2

压缩

抽功能实现了对javascript脚本和CSS进行压缩的功能,它能去脚本或样式中未必要的空白和注释,同时能优化脚论变量名的长度。 我们来拘禁下这段JavaScript函数。

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

削减后,该函数被联合到了扳平列: 

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

除外剔除注释和剩下的空格外,其变量名也深受浓缩为如下这样: 

原变量

缩短后

imageTagAndImageID

n

imageContext

t

imageElement

i

 

联合及减少脚论针对网站性能的熏陶

脚表格显示了剧本被联合减后针对网站性能提升的熏陶。

 

合并和压缩后

未压缩和合并

性能提升

HTTP请求数

9

34

256%

发送字节(KB)

3.26

11.92

266%

响应字节(KB)

388.51

530

36%

耗时(ms)

510 MS

780 MS

53%

 

以及不优化的网站相比,优化后不光减少了HTTP请求头的分寸,同时伸手文件的尺寸也负有明确的缩减。 不同文件的压缩大小是勿一致的,该网站的无比深的剧本文件已经是减掉了之(Scripts\jquery-ui-1.8.11.min.js and Scripts\jquery-1.7.1.min.js) 。 

注:网站的耗时实例是由此Fiddler工具来实现的 。 (从Fiddler的Rules 菜单中选择Performance 然后挑 Simulate Modem Speeds )。

调剂和压缩Javascript

在支付条件下以JavaScript脚论不见面给缩减和统一,所以调试JavaScript是项很轻的事务(在 Web.config文件被compilation节点设置debug=”true” )。你可调节一个宣布版的JavaScript用于生产条件。 使用IE F12开发人员工具,调试JavaScript脚本的法子如下:

1 选择“脚本 ”选项卡,然后选取“开始调剂”按钮。

2 选择而只要调节的剧本文件。 

 图片 3

3. 精选“配置” 按钮 ,格式化压缩后的JavaScript,然后选择“格式后底JavaScript”按钮图片 4

4. 公还得经搜寻方法来找你得调剂之函数。 在底下的图纸,在检索输入框中输入AddAltToImg,搜索结果碰头以高亮方式示。 

 图片 5

有关开发人员工具调试之再度多信息,请参考MSDN文章利用开发人员工具调试JavaScript错误.aspx&usg=ALkJrhgQCmu57FL6tKFAP8sDvCjk0d11vA) 。

配置脚论压缩和联合功能

当 Web.config文件被compilation节点设置debug 的值好开启或关闭压缩和归并功能。 在下面的XML中, debug设置值为true,可以禁用脚本压缩和集合功能。

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

如果一旦启用脚本压缩和合,则装debug 为false 。你可以通过BundleTable 类的EnableOptimizations 属性来掩盖Web.config中之装置。 下面的代码演示了如由此BundleTable 来罩Web.config文件中之安: 

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
   BundleTable.EnableOptimizations = true;
}

注意 :除非设置EnableOptimizations为true或设置Web.config文件中compilption 节点的debug属性为false,否则程序是匪见面合并及压缩文件的。 此外,系统啊无见面选压缩了的本子,而是挑调试版本。 EnableOptimizations属性的设置以见面盖Web.config中的安。

以ASP.NET Web窗体和Web Pages中运用脚本合并及减少功能

  •  优化Web Pages 请点击这里翻 Adding Web Optimization to a Web Pages Site.。
  •  优化 ASP.NET Web窗体项目要点击这里翻 Adding Bundling and Minification to Web Forms。

以ASP.NET MVC中采取压缩和联功能

于本节面临,我们拿创设一个ASP.NET MVC项目,来感受压缩和统一功能。 首先,创建一个新的ASP.NET MVC Internet项目名为也MvcBM ,其他设置默认。

打开App_Start \BundleConfig.cs文件并查找RegisterBundles方法,该措施是因此来创造、注册及安排需要减小和优化的脚本文件的。下面的代码显示了有RegisterBundles方法。

 public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
         // Code removed for clarity.
}

方的代码我们创建了一个初的命名为~/bundles/jquery 的JavaScript bundle,并带有了相当的 脚本文件(用于压缩和联合,这里不保险含.vsdoc),还可以通过通配符或重要字来匹配脚本文件夹下殊版本的脚本文件。 ASP.NET MVC 4 中,系统默认集成了jquery-1.7.1.js 库。在release版本中,系统以甄选jquery-1.7.1.min.js 包含在列蒙。 脚本合并框架遵循以下几独标准化:

  •  当“FileX.min.js” 和“FileX.js” 同时存在时时,在release版本中,系统将挑选文件称包含“.min”的脚本
  • 恳请捎文件称被不带有“.min”的文件进行调试。
  • 求过滤文件称受蕴藏“.vsdoc”的公文(如jQuery-1.7.1-vsdoc.js),该文件才用于VS的智能感知提示。

{version}关键字是为此来含有不同版本的jQuery库的。 在这例子中,使用通配符存在以下几独好处:

  • 兴你在未改动原来配置的图景下通过NuGet 更新您的jQuery版本。
  • 机动选择调试版本与文书称遭富含“.min”的批发本。

使用CDN

 CDN jQuery 库将取而代之本地jQuery库。 

public static void RegisterBundles(BundleCollection bundles)
{
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //            "~/Scripts/jquery-{version}.js"));

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the CDN
    var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

    bundles.Add(new ScriptBundle("~/bundles/jquery",
                jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
}

当上面的代码中,在发行版中将以CDN 上的jQuery库,而地面调试之时光使用当地本jQuery库。 当使用CDN 版本时,你应当成立一个容错机制,预防CDN加载失败的情景。 下面的代码演示了若当CDN 中之jQuery库加载失败的动静下如何加载本地本。

</footer>

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

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script> 

        @RenderSection("scripts", required: false)
    </body>
</html>

开创一个Bundle

Bundle恍如Include方法接受一个字符串或数组类型,其中每个字符串是一个虚构的文件路径。其中RegisterBundles方法以App_Start /BundleConfig.cs 文件被示范了安将大半个文件上加到一个文书被:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
          "~/Content/themes/base/jquery.ui.core.css",
          "~/Content/themes/base/jquery.ui.resizable.css",
          "~/Content/themes/base/jquery.ui.selectable.css",
          "~/Content/themes/base/jquery.ui.accordion.css",
          "~/Content/themes/base/jquery.ui.autocomplete.css",
          "~/Content/themes/base/jquery.ui.button.css",
          "~/Content/themes/base/jquery.ui.dialog.css",
          "~/Content/themes/base/jquery.ui.slider.css",
          "~/Content/themes/base/jquery.ui.tabs.css",
          "~/Content/themes/base/jquery.ui.datepicker.css",
          "~/Content/themes/base/jquery.ui.progressbar.css",
          "~/Content/themes/base/jquery.ui.theme.css"));

Bundle类的IncludeDirectory方法可以加上一个目录中之具备的(和所有子目录)相兼容文件。 Bundle类IncludeDirectory API是之类所示:

 public Bundle IncludeDirectory(
     string directoryVirtualPath,  // The Virtual Path for the directory.
     string searchPattern)         // The search pattern.

 public Bundle IncludeDirectory(
     string directoryVirtualPath,  // The Virtual Path for the directory.
     string searchPattern,         // The search pattern.
     bool searchSubdirectories)    // true to search subdirectories.

每当页面被可下Render方法来引用创建好之包(JavaScript对承诺了Scripts.Render  而CSS对应的凡Styles.Render )。下面的代码演示了于Views\Shared\_Layout.cshtml  文件被使引用CSS和JavaScript的:

<!DOCTYPE html>
<html lang="en">
<head>
    @* Markup removed for clarity.*@    
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* Markup removed for clarity.*@

   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
</body>
</html>

呼吁留意Render方法的参数是一个字符串或数组类型,它同意你在一个计中补充加多只援。 一般情况下,你得下Render方法来机关引用文件要简易了其余HTML标签。你可以使用Url的点子来蛮成一个文书URL绝对路径。 假要是你想使的HTML5 异步性。 下面的代码演示了何等下Url方法引用Modernizr 包。

 <head>
    @*Markup removed for clarity*@
    <meta charset="utf-8" />
    <title>@ViewBag.Title - MVC 4 B/M</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

   @* @Scripts.Render("~/bundles/modernizr")*@

    <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>
</head>

应用通配符“*”来配合文件

每当Include 和 IncludeDirectory方法被可以通过通配符“*”来配合路径中某个有如出一辙元素的文本。匹配时莫分路径中之大大小小写。 IncludeDirectory方法有搜索子目录的功能。

苟一个类别下发出如下JavaScript文件:

  • Scripts\Common\AddAltToImg.js
  • Scripts\Common\ToggleDiv.js
  • Scripts\Common\ToggleImg.js
  • Scripts\Common\Sub1\ToggleLinks.js

图片 6

下的表演示了采用通配符来添加如图所示文件及项目面临:

使用通配符

匹配到的文件或异常提示

Include("~/Scripts/Common/*.js")

AddAltToImg.js, ToggleDiv.js, ToggleImg.js

Include("~/Scripts/Common/T*.js")

无效的匹配模式,通配符只能在文件的前缀或后缀中使用。

Include("~/Scripts/Common/*og.*")

无效的匹配模式,一个路径中只能使用一个通配符。

"Include("~/Scripts/Common/T*")

ToggleDiv.js, ToggleImg.js

"Include("~/Scripts/Common/*")

无效的匹配模式,仅使用一个通配符是没有任何意义的。

IncludeDirectory("~/Scripts/Common", "T*")

ToggleDiv.js, ToggleImg.js

IncludeDirectory("~/Scripts/Common", "T*",true)

ToggleDiv.js, ToggleImg.js, ToggleLinks.js

 

便状态下,我们相应首选通过整体路径来填补加文件,其故如下:

  • 运用通配符添加脚本其丰富顺序是依据文件称之假名排序来挨家挨户增长的,有时候因为脚本相互依赖的图景,这种增长方式或会见拧。 CSS和JavaScript文件时坐相互依赖而不能够随文件称排序来丰富。为了削减潜在的风险,你可经长一个自定义IBundleOrderer.aspx&usg=ALkJrhjmJJjY5MAYiMWZy1ms98jPEtjM3g)来上加文件,但是透过一体化文件名来添加文件是极度保险的。 例如,将来亟需加上新文件时,你或只要透过改 IBundleOrderer.aspx&usg=ALkJrhjmJJjY5MAYiMWZy1ms98jPEtjM3g)类才能够实现。
  • 于JavaScript中动用通配符来填补加一个目录的具备脚论至项目面临恐怕会见唤起JavaScript的缪提示。
  • 在加载CSS文件时,可能会见油然而生加载重的情况,如下所显示之例证:

    bundles.Add(new StyleBundle(“~/jQueryUI/themes/baseAll”)

    .IncludeDirectory("~/Content/themes/base", "*.css"));
    

通配符“*.CSS”可以匹配文件夹下有所的CSS文件,包括Content\themes\base\jquery.ui.all.css 。Jquery.ui.all.css可能在外文件被既存在。

包缓存

联后底系设置了HTTP过期时吗同一年。如果你又打开了一个吧绝非,在服务器的版本为免改变的气象下,服务器将会见返回一个HTTP 304状态码,这样浏览器会加载缓存中之公文。 你也可以在IE浏览器下通过本Ctrl + F5来强制刷新页面,这时浏览器会重新请文件,而不是打缓存中读取(此时服务器响应的HTTP状态码为200)。

脚的图像展示了当Fiddler中“Caching”选项卡缓存文件之事态 :

 图片 7

央的不二法门为

http://localhost/MvcBM\_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81 
内AllMyScripts是优化后底包名,V = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81是时下包之一个一定字符,用于缓存当前底文本。 只要服务器端包不改动,ASP.NET应用程序将一直下AllMyScripts包吃的该标记。 如果保证被之文书在变化,ASP.NET程序用会变动一个初的字符串,以便为刷新缓存,使客户端取新的文书。

If you run the IE9 F12 developer tools and navigate to a previously
loaded page,
IE incorrectly shows conditional GET requests made to each bundle and
the server returning HTTP 304.
You can read why IE9 has problems determining if a conditional request
was made
in the blog entry Using CDNs and Expires to Improve Web Site
Performance. (该段不见面翻)。

于LESS, CoffeeScript, SCSS, Sass中应用脚本优化作用

统一及压缩框架提供了一个编制来拍卖SCSS 、Sass 、LESS和CoffeeScript并转移并联合及优化包中。 例如,添加 LESS 文件及公的MVC4品类:

  1. 创一个文件夹用于上加而的LESS文件。 下面的示范演示了怎样使 Content\MyLess folder。 
  2. 经过NuGet来补充加合适的包到你的品种面临:
  3. 添加一个类似,并实现 IBundleTransform.aspx) 接口。然后可以通过下的代码把LESS添加到公的路蒙:

    using System.Web.Optimization;
    
    public class LessTransform : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            response.Content = dotless.Core.Less.Parse(response.Content);
            response.ContentType = "text/css";
        }
    }
    
  4. 始建一个Bundle对象,然后上加 LessTransform 和CssMinify.aspx) ,接下当 App_Start\BundleConfig.cs 中应用 RegisterBundles  方法来报你的法子。

    var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");
    lessBundle.Transforms.Add(new LessTransform());
    lessBundle.Transforms.Add(new CssMinify());
    bundles.Add(lessBundle);
    
  5. 调用Bundle包如下所示:

    @Styles.Render("~/My/Less");
    

联合之注意事项

当你下Bundle对象来创造一个包时应该为此”bundle” 来举行前缀,这样可以防止路由冲突 。

如而的承保被设有一个文件更新,程序会转一个初的询问参数来若客户端在生一致不行访问的时光取得到最新的本。在人情的单身列有文件引用程序中,客户端才会再度请修改过的文书,但是于这种新的主意下,会重新下载整个包中的公文,因此,如果您的保管时改变,使用这种统一方式或者连无是一个好之选料。

文本之合并和减少主要是以精益求精页面在第一不良加载的早晚文件下充斥所消耗的日子。当该页面加载了,当再度同涂鸦打开该页面时,浏览器会从缓存中读取这些缓存资源(JavaScript,CSS和图像),所以,在打开同一站点的其余页面,这种措施并无克加强网站的特性(PS:因为不合并及压缩的文书也可于缓存)。如果文件的超时设置不得法,浏览器会重复请求该公文,这种场面下合并和压缩文件会增进非第一不善打开网页的性质。 有关详细信息,请参考Using CDNs and Expires to Improve Web Site Performance 。

通过CDN可以改善浏览器与站点又伸手限制的题材。在CDN环境下,客户端将从今不同之域名来呼吁暑假,这个时节同一网站的资源会给缓存在不同之主机商,从而加速网站打开速度,同时CDN还提供了数量缓存的效应。

System.Web.Optimization命名空间包含在System.Web.Optimization.DLL文件中。 它减少功能使用的凡WebGrease库(WebGrease.dll),然后利用Antlr3.Runtime.dll。

Additional Resources

· Video: Bundling and Optimizing by Howard Dierking

· Adding Web Optimization to a Web Pages Site.

· Adding Bundling and Minification to Web Forms.

· Performance Implications of Bundling and Minification on Web Browsing by Henrik F Nielsen   ‏@frystyk

· Using CDNs and Expires to Improve Web Site Performance by Rick Anderson   @RickAndMSFT

· Minimize RTT (round-trip times)

Contributors

· Hao Kung

· Howard Dierking

· Diana LaRose

 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

转载请注明原文地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html 

相关文章

网站地图xml地图