{version}关键字是用来含有不相同版本的jQuery库的。 在那一个事例中,使用通配符存在以下多少个便宜:

接纳通配符“*”来合作文件

肆. 你仍是能够经过搜索方法来寻找你需求调剂的函数。 在上边包车型大巴图纸,在查找输入框中输入AddAltToImg,搜索结果会以高亮方式浮现。 

地点的代码我们创立了1个新的命名称为~/bundles/jquery 的JavaScript bundle,并蕴藏了方便的 脚本文件(用于压缩和集合,那里不包括.vsdoc),还是能通过通配符或根本字来相配脚本文件夹下分裂版本的剧本文件。 ASP.NET MVC 肆 中,系统暗中同意集成了jquery-壹.7.1.js 库。在release版本中,系统将精选jquery-一.七.一.min.js 包罗在品种中。 脚本合并框架遵从以下多少个原则:

注:网站的耗费时间实例是因而Fiddler工具来落到实处的 。 (从Fiddler的Rules 菜单中选取Performance 然后选用 Simulate Modem Speeds )。

联合和削减框架提供了贰个体制来拍卖SCSS 、Sass 、LESSCoffeeScript并转移并统1到优化包中。 例如,添加 LESS 文件到您的MVC4种类:

通配符“*.CSS”能够同盟文件夹下全体的CSS文件,包涵Content\themes\base\jquery.ui.all.css 。Jquery.ui.all.css恐怕在其他文件中早就存在。

在LESS, CoffeeScript, SCSS, Sass中利用脚本优化功能

除了剔除注释和剩下的空卓绝,其变量名也被裁减为如下那样: 

当前主流浏览器限制客户端对同1域名只可以同时提倡陆(PS:原来的小说如此)个HTTP连接。 那象征,打开1个网页只可以同时加载5个HTTP请求,在同一个域名下别的的伸手将被浏览器到场到请求队列中。 在IE浏览器中按F1二调出开发人士工具,切换来网络标签,如下图所示,展现的是2个实例网址关于HTTP财富请求的情况。 

<!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>
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

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

 jQuery 1

· Hao Kung

 jQuery 2

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

  • 同意你在不更改原有配置的意况下通过NuGet 更新您的jQuery版本。
  • 机关选择调节和测试版本和文书名中包括“.min”的批发版本。

 jQuery 3

System.Web.Optimization命名空间包括在System.Web.Optimization.DLL文件中。 它减弱功用使用的是WebGrease库(WebGrease.dll),然后使用Antlr3.Runtime.dll。

减掉功用完成了对javascript脚本和CSS举办压缩的法力,它能够去除脚本或样式中不须要的空域和注释,同时能够优化脚本变量名的尺寸。 大家来看上边那段JavaScript函数。

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

减掉后,该函数被联合到了1列: 

在ASP.NET MVC中选拔压缩和归并功能

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

· Adding Bundling and Minification to Web Forms.

 上面包车型客车图纸中彰显了当下能源在上马事件中被浏览器参与了请求队列。因为浏览器同时伸手限制的震慑,当前能源必须等待四6飞秒完结上一个HTTP请求才能履行当前的伸手。

压缩

 

合并和压缩后

未压缩和合并

性能提升

HTTP请求数

9

34

256%

发送字节(KB)

3.26

11.92

266%

响应字节(KB)

388.51

530

36%

耗时(ms)

510 MS

780 MS

53%

假设要启用脚本压缩和联合,则设置debug 为false 。你能够通过BundleTable 类的EnableOptimizations 属性来覆盖Web.config中的设置。 上面包车型大巴代码演示了假设因此BundleTable 来掩盖Web.config文件中的设置: 

若果您的包中存在三个文书更新,程序会转移二个新的询问参数来使客户端在下三次访问的时候得到到新型的版本。在观念的单独列出文件引用程序中,客户端仅会再次请求修改过的文本,然则在这种新的不二法门下,会重复下载整个包中的公文,因而,若是你的包日常改变,使用那种统一形式或许并不是三个好的取舍。

下图体现了打开了剧本合并功效后打开该网址的HTTP请求情形。

· Adding Web Optimization to a Web Pages Site.

由此CDN能够改进浏览器同站点同时呼吁限制的标题。在CDN环境下,客户端将从分歧的域名来呼吁暑假,这年同一网址的财富会被缓存在分歧的主机商,从而加速网站打开速度,同时CDN还提供了数码缓存的职能。

转发请申明原来的小说地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html 

联合是ASP.NET 四.第55中学的新职能,使开发者很简单达成把八个文本合并成三个文本。 你能够兑现CSS、javascript脚本以及此外文件的合并成效。合并五个文本表示减小了HTTP请求的个数,同时提升了页面包车型地铁加载速度。

</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>

与未优化的网址比较,优化后不光收缩了HTTP请求头的轻重缓急,同时请求文件的大大小小也拥有明显的滑坡。 分裂文件的滑坡大小是不雷同的,该网址的最大的台本文件已经是削减过的(Scripts\jquery-ui-1.8.11.min.js and Scripts\jquery-1.7.1.min.js) 。 

· Video: Bundling and Optimizing by Howard Dierking

开创八个Bundle

  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");
    
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.
}

当你利用Bundle对象来创建三个包时应该用”bundle” 来做前缀,那样能够预防路由争执 。

· Minimize RTT (round-trip times)

集合的注意事项

 

平凡状态下,大家相应首要选取通过壹体化路径来添加文件,其原因如下:

在页面中得以应用Render方法来引用成立好的包(JavaScript对应了Scripts.Render  而CSS对应的是Styles.Render )。下边包车型地铁代码演示了在Views\Shared\_Layout.cshtml  文件中一旦引用CSS和JavaScript的:

一 选拔“脚本 ”选项卡,然后选拔“初阶调节和测试”按钮。

http://localhost/MvcBM\_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81 
个中AllMyScripts是优化后的包名,V = r0sLDicvP5八AIXN_mc叁QdyVvVj伍euZNzdsa2N一PKvb81是当下包的三个特定字符,用于缓存当前的文本。 只要服务器端包不更改,ASP.NET应用程序将间接利用AllMyScripts包中的该标记。 假设包中的文件存在变化,ASP.NET程序将会转变一个新的字符串,以便于刷新缓存,使客户端获得新的公文。

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"));

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

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

伸手的门路为

Contributors

在上头的代码中,在发行版少将使用CDN 上的jQuery库,而地面调节和测试的时候利用本地版本jQuery库。 当使用CDN 版本时,你应该建立贰个容错机制,预防CDN加载战败的境况。 上面包车型客车代码演示了就算在CDN 中的jQuery库加载退步的情事下怎么样加载本地版本。

调剂以及压缩Javascript

· Howard Dierking

在 Web.config文件中compilation节点设置debug 的值能够打开或关闭压缩和归并功效。 在底下的XML中, debug设置值为true,能够禁止使用脚本压缩和统1功能。

合并

下边包车型大巴图像展现了在Fiddler中“Caching”选项卡缓存文件的情事 :

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }
  • 采取通配符添加脚本其增加顺序是根据文件名的字母排序来挨家挨户拉长的,有时候因为脚本相互注重的动静,那种增进格局也许会出错。 CSS和JavaScript文件日常因为相互信赖而不能够依据文件名排序来添加。为了减小潜在的高风险,你能够经过充裕一个自定义IBundleOrderer.aspx&usg=ALkJrhjmJJjY伍MAYiMWZy1ms九8jPEtjM三g)来添加文件,不过通过全部文件名来添加文件是最保障的。 例如,将来内需加上新文件时,你或然要经过改动 IBundleOrderer.aspx&usg=ALkJrhjmJJjY5MAYiMWZy一ms9捌jPEtjM三g)类才能实现。
  • 在JavaScript中拔取通配符来添加三个目录的拥有脚本到项目中大概会挑起JavaScript的失实提醒。
  • 在加载CSS文件时,恐怕会产出加载重复的意况,如下所示的例证:

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

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

在本节中,大家将开创四个ASP.NET MVC项目,来体会压缩和统一成效。 首先,创设一个新的ASP.NET MVC Internet项目名称叫MvcBM ,别的装置默许。

留神 :除非设置EnableOptimizations为true或设置Web.config文件中compilption 节点的debug属性为false,不然程序是不会面并和压缩文件的。 别的,系统也不会采用压缩过的剧本,而是精选调节和测试版本。 EnableOptimizations属性的安装将会覆盖Web.config中的设置。

 

 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.

使用CDN

使用通配符

匹配到的文件或异常提示

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

在ASP.NET Web窗体和Web Pages中运用脚本合并和压缩效用

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

包缓存

 

假设一个门类下有如下JavaScript文件:

jQuery 4

  •  当“FileX.min.js” 和“FileX.js” 同时存在时,在release版本中,系统将接纳文件名包蕴“.min”的台本
  • 请采取文件名中不蕴含“.min”的文件举行调节和测试。
  • 请过滤文件名中包涵“.vsdoc”的文件(如jQuery-一.7.壹-vsdoc.js),该公文仅仅用于VS的智能感知提醒。
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/, ''));
}

下边包车型地铁表演示了选取通配符来添加如图所示文件到品种中:

2 选拔你要调节的本子文件。 

 樱草黄的进程条呈现的是近日呼吁等待的日子,浏览器通过队列来贯彻任何财富的次第加载。 铅灰的进程条显示的是客户端与服务器建立请求所开支的年华。 深紫褐条呈现的是近日财富从服务器下载实现所开销的大运。 你能够双击当前呼吁查询详细景况。 例如,下图展现的是加载/ Scripts/MyScripts/JavaScript陆.js文件整个请求进度的详细景况。 

 jQuery 5

· Diana LaRose

Bundle类Include方法接受一个字符串或数组类型,个中每一种字符串是一个虚构的文件路径。当中RegisterBundles方法在App_Start /BundleConfig.cs 文件中示范了什么样将三个文本添加到二个文书中:

下面表格展现了本子被统1压缩后对网址品质提高的震慑。

集合和削减脚本对网址品质的震慑

 jQuery 6

文件的合并和减少主假若为着精益求精页面在率先次加载的时候文件下载所费用的时日。当该页面加载完结,当再2次打开该页面时,浏览器会从缓存中读取那一个缓存财富(JavaScript,CSS和图像),所以,在开拓同一站点的任何页面,那种措施并不能够增进网址的属性(PS:因为不合并和收缩的文书也得以被缓存)。如若文件的晚点设置不科学,浏览器会重复请求该文件,那种景色下合并和压缩文件会增高非第2次打开网页的本性。 有关详细音信,请参阅Using CDNs and Expires to Improve Web Site Performance 。

 <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>

Additional Resources

布置脚本压缩和归并功效

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

打开App_Start \BundleConfig.cs文件并查找RegisterBundles方法,该措施是用来创立、注册和配置须求减小和优化的剧本文件的。上面包车型客车代码呈现了一些RegisterBundles方法。

3. 挑选“配置” 按钮 ,格式化压缩后的JavaScript,然后采取“格式后的JavaScript”按钮jQuery 7

请留心Render方法的参数是一个字符串或数组类型,它同意你在多个措施中添加多少个引用。 一般情况下,你能够应用Render方法来机关引用文件而简约了其余HTML标签。你能够利用Url的主意来生成3个文书U劲客L相对路径。 借使你想使用的HTML伍 异步质量。 下边包车型的士代码演示了什么样采纳Url方法引用Modernizr 包。

至于开发人士工具调节和测试的更加多消息,请参阅MSDN作品行使开发职职员和工人具调节和测试JavaScript错误.aspx&usg=ALkJrhgQCmu57FL6tKFAP8sDvCjk0d11vA) 。

原变量

缩短后

imageTagAndImageID

n

imageContext

t

imageElement

i

联合后的体系设置了HTTP过期时间为一年。要是你再次打开了一个也没,在服务器的本子为未变动的状态下,服务器将会回去一个HTTP 30四状态码,那样浏览器会加载缓存中的文件。 你也得以在IE浏览器下通过按Ctrl + F伍来强制刷新页面,那时浏览器会重新请求文件,而不是从缓存中读取(此时服务器响应的HTTP状态码为200)。

在Include 和 IncludeDirectory方法中能够通过通配符“*”来合作路径中某部分1律成分的文本。匹配时不区分路径中的大小写。 IncludeDirectory方法具有搜索子目录的效益。

在支付条件下因为JavaScript脚本不会被减弱和集合,所以调节和测试JavaScript是件很简单的思想政治工作(在 Web.config文件中compilation节点设置debug=”true” )。你能够调剂一个公布版本的JavaScript用于生产条件。 使用IE F1二开发职职员和工人具,调节和测试JavaScript脚本的点子如下:

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. (该段不会翻译)。

Bundle类的IncludeDirectory方法能够增进1个索引中的全部的(和全部子目录)相相配文件。 Bundle类IncludeDirectory API是之类所示:

相关文章

网站地图xml地图