那么在开拓进度中作为.NET程序猿是如何挑选的吗,下图呈现了敞开了剧本合併功用后张开该网址的HTTP必要景况ca88亚洲城网站

电动营造

批处理自动合併压缩脚本build.bat:

@echo off
echo start build js
node.exe r.js -o build-js.js
echo end build js
echo start build css
node.exe r.js -o build-css.js
echo end build css
echo. & pause

因为自个儿的js文件是和调控器中的view视图分界面一一对应的,那么自身急需四个动态的js营造脚本,这里小编使用强劲的T4模板来贯彻,新建三个文书模板build-js.tt,假设您的VS未有T4的智能提示,你供给安装四个VS插件,展开VS——工具——扩展和翻新:

ca88亚洲城网站 1

T4模板代码如下:

<#@ template debug="false" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#@ import namespace="System.Linq" #>
<#@ import namespace="System.IO" #>
<#@ import namespace="System.Configuration" #>
<#@ import namespace="System.Text" #>
<#@ import namespace="System.Collections.Generic" #>
<#@ output extension=".js" #>
({
    appDir: '<#= relativeBaseUrl #>',
    baseUrl: './',
    mainConfigFile: '<#= relativeBaseUrl #>/config.js',
    dir: '../release-js',
    modules: [
    {
        name: "config",
        include: [
            // These JS files will be on EVERY page in the main.js file
            // So they should be the files we will almost always need everywhere
            "domReady",
            "jquery",
            "jqueryValidate",
            "jqueryValidateUnobtrusive",
            "bootstrap",
            "moment"
            ]
    },
    <# foreach(string path in System.IO.Directory.GetFiles(this.Host.ResolvePath(relativeBaseUrl+"/views"), "*.js", System.IO.SearchOption.AllDirectories)) { #>
{
       name: '<#= GetRequireJSName(path) #>'
    },
    <# } #>
],
    onBuildRead: function (moduleName, path, contents) {
        if (moduleName = "config") {
            return contents.replace("/themes/default/content/js","/themes/default/content/release-js")
        }
        return contents;
    },
})

<#+ 
    public const string relativeBaseUrl = "../js";

    public string GetRequireJSName(string path){
    var relativePath = Path.GetFullPath(path).Replace(Path.GetFullPath(this.Host.ResolvePath("..\\js\\")), "");
    return Path.Combine(Path.GetDirectoryName(relativePath), Path.GetFileNameWithoutExtension(relativePath)).Replace("\\", "/");
} #>

透过T4模板生产的营造脚本如下:

({
    appDir: '../js',
    baseUrl: './',
    mainConfigFile: '../js/config.js',
    dir: '../release-js',
    modules: [
    {
        name: "config",
        include: [
            // These JS files will be on EVERY page in the main.js file
            // So they should be the files we will almost always need everywhere
            "domReady",
            "jquery",
            "jqueryValidate",
            "jqueryValidateUnobtrusive",
            "bootstrap",
            "moment"
            ]
    },
    {
       name: 'views/areas/admin/default/index'
    },
    {
       name: 'views/home/index'
    },
    {
       name: 'views/home/login'
    },
    ],
    onBuildRead: function (moduleName, path, contents) {
        if (moduleName = "config") {
            return contents.replace("/themes/default/content/js","/themes/default/content/release-js")
        }
        return contents;
    },
})

 个人点评:灵活性很好,想怎么整怎么整,况且可以很好的支撑每一日营造和不断集成。

 一时候,总是会在某一瞬间就有新奇的主张,那就是程序猿,假诺你感觉自个儿的稿子对你有扶持或然启发,请推荐一下啊!要是有和煦的主见也请建议来,大家一起商量!

 后记:笔者自然还想给每js和css的url路线后缀增加版本号来兑现客户端缓存的自动更新,如?v=1.0,可是前面想了下浏览器本人就自带客户端缓存,所以就先未有拉长,假使真有须要,能够随时补上。

 调解后的品类源码:https://git.coding.net/zouyujie/Smp.git

使用CDN

方式一 Bunding+RequireJS混用

先来拜候一个鬼子的做法,他大致上是这么做的:

http://localhost/MvcBM\_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81 
内部AllMyScripts是优化后的包名,V = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81是日前包的四个一定字符,用于缓存当前的文书。 只要劳动器端包不转移,ASP.NET应用程序将直接利用AllMyScripts包中的该标志。 假如包中的文件存在变化,ASP.NET程序将会变卦叁个新的字符串,以便于刷新缓存,使客户端获得新的文本。

   
因为自身深感各自都有利害,RequireJS的后天不足在于,在付出的时候,你不能够引进压缩后的js或然css,不然不恐怕调节和测验和更换,而Bundling的话debug情势暗中同意情状下是不减弱,你一发布到生育成release就自行削减,调节和测量检验起来十三分有益。RequireJS的亮点在于能够异步按需加载,还也可以有就是模块化js代码,而Bundling
则是简约残暴的百分百合併成一个文本举办加载,你看不出模块化援引也促成持续按需加载,
那么在付出进度中作为.NET技师是怎么抉择的呢?能或不能够组成双方的帮助和益处来行使呢?

 紫深绿的进程条显示的是当前呼吁等待的小时,浏览器通过队列来落到实处其余财富的逐Samsung载。 金红的进程条显示的是客户端与服务器建构央求所花费的时刻。 银色条呈现的是现阶段财富从服务器下载完结所花费的日子。 你可以双击当前呼吁查询详细处境。 例如,下图展现的是加载/ Scripts/MyScripts/JavaScript6.js文件整个央浼进度的详细意况。 

   
如若你跟自己说你还不领会RequireJS是个神马冬冬?请移步至:http://requirejs.org/docs/api.html

上面包车型大巴表演示了运用通配符来增多如图所示文件到项目中:

RequireJS配置部分

在ASP.NET MVC项目中,大家一般是在_Layout母版页中加多js引用

    <script src="~/Scripts/require.js"></script>
    @if (!HttpContext.Current.IsDebuggingEnabled)
    {
        <script>
            requirejs.config({
                bundles: {
                    '@Scripts.Url("~/bundles/test").ToString()': [
                        'jquery',
                        'globalize',
                        'q']
                }
            });
        </script>
    }

民用点评:很不美观的完成方式,说好的模块化呢?何况并从未提供整机的应用程序消除方案。

鬼子原作地址:ASP.NET MVC Bundling and Minification with
RequireJS

Contributors

方式二 RequireJS.NET

而是随后我就开掘了叁个插件RequireJS.NET

什么是RequireJS.NET?

RequireJS.NET让每二个C#程序员能够来营造JavaScript代码,无需具有高等的js编制程序技术就能够来明白和应用。

在ASP.NET MVC中使用RequireJS的优势:

  • 让JavaScript代码尤其可复用
  • 保障的对象和依赖关系管理
  • 适用于大型复杂的使用
  • 异步加载JavaScript文件

个体点评:安装那些设置那贰个,何况相比蠢笨,笔者完全能够团结写代码完成它的机能,并且更灵敏,想怎么改怎么改。

RequireJS.NET的利用请参考:Getting started with RequireJS for ASP.NET
MVC

在 Web.config文件中compilation节点设置debug 的值能够开启或关闭压缩和集结成效。 在上面包车型大巴XML中, debug设置值为true,能够禁止使用脚本压缩和合併功用。

自己的实现情势

    接下去,笔者将隆重推出笔者的贯彻格局自身的做法是:抛弃ASP.NET
MVC自带的Bundling功用,因为它太傻瓜、太惨酷了,但是足以将RequireJS and
R.js
很温馨的合一在ASP.NET
MVC项目中来。纵然RequireJS看上去在单页应用的场景下用起来非常低价,可是在应用程序场景下也是完全一样适用的,只要你愿意承受它的这种艺术。

动用本领: using RequireJS and R.js

目录结构如下:

ca88亚洲城网站 2ca88亚洲城网站 3ca88亚洲城网站 4

出于在ASP.NET
MVC项目中,有模板页_Layout.cshtml,那么本人能够把一部分公用调用的东西直接放到模板页中,这里自个儿通过Html的恢弘方法开始展览了打包

css的调用:

     <link rel="stylesheet" href="@Html.StylesPath("main.css")" />

js的调用:

    <script src="@Url.Content("~/themes/default/content/js/require.js")"></script>
    <script>   @Html.ViewSpecificRequireJS()</script>
        @RenderSection("scripts", required: false)

RequireJsHelpers:

using System.IO;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace Secom.Emx.WebApp
{
    public static class RequireJsHelpers
    {
        private static MvcHtmlString RequireJs(this HtmlHelper helper, string config, string module)
        {
            var require = new StringBuilder();
            string jsLocation = "/themes/default/content/release-js/";
#if DEBUG
            jsLocation = "/themes/default/content/js/";
#endif

            if (File.Exists(helper.ViewContext.HttpContext.Server.MapPath(Path.Combine(jsLocation, module + ".js"))))
            {
                require.AppendLine("require( [ \"" + jsLocation + config + "\" ], function() {");
                require.AppendLine("    require( [ \"" + module + "\",\"domReady!\"] ); ");
                require.AppendLine("});");
            }

            return new MvcHtmlString(require.ToString());
        }

        public static MvcHtmlString ViewSpecificRequireJS(this HtmlHelper helper)
        {
            var areas = helper.ViewContext.RouteData.DataTokens["area"];
            var action = helper.ViewContext.RouteData.Values["action"];
            var controller = helper.ViewContext.RouteData.Values["controller"];

            string url = areas == null? string.Format("views/{0}/{1}", controller, action): string.Format("views/areas/{2}/{0}/{1}", controller, action, areas);

            return helper.RequireJs("config.js", url);
        }
        public static string StylesPath(this HtmlHelper helper, string pathWithoutStyles)
        {
#if (DEBUG)
            var stylesPath = "~/themes/default/content/css/";
#else
            var stylesPath =  "~/themes/default/content/release-css/";
#endif
            return VirtualPathUtility.ToAbsolute(stylesPath + pathWithoutStyles);
        }
    }
}

再来看下我们的js主文件config.js

requirejs.config({
    baseUrl: '/themes/default/content/js',
    paths: {
        "jquery": "jquery.min",
        "jqueryValidate": "lib/jquery.validate.min",
        "jqueryValidateUnobtrusive": "lib/jquery.validate.unobtrusive.min",
        "bootstrap": "lib/bootstrap.min",
        "moment": "lib/moment.min",
        "domReady": "lib/domReady",
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: "jQuery.fn.popover"
        },
        "jqueryValidate": ["jquery"],
        "jqueryValidateUnobtrusive": ["jquery", "jqueryValidate"]
    }
});

 在付出条件,大家的css文件明确无法减小合併,不然不能够调节和测量试验了,而生产条件断定是须要裁减和归并的,那么本身想要开采的时候不联合,一发布到生产就自行合併

ca88亚洲城网站 5

那么有二种办法,一种啊是单独写四个批处理脚本,每一次发表到生育的时候就运维一下,一种啊是一向在档次的变化事件中展开布署,假诺是debug形式就不巨惠扣合并,假使是release方式则降低合併

ca88亚洲城网站 6

if $(ConfigurationName) == Release node "$(ProjectDir)themes\default\content\build\r.js" -o "$(ProjectDir)themes\default\content\build\build-js.js"
if $(ConfigurationName) == Release node "$(ProjectDir)themes\default\content\build\r.js" -o "$(ProjectDir)themes\default\content\build\build-css.js"

在Include 和 IncludeDirectory方法中能够通过通配符“*”来合作路线中某有个别完全一样成分的文本。相配时不区分路径中的大小写。 IncludeDirectory方法具有寻觅子目录的功力。

    指标:在ASP.NET MVC项目中落到实处js和css的模块化,并帮衬压缩合併。

 ca88亚洲城网站 7

Bundling部分

App_Start/BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/test").Include(
                   "~/Scripts/jquery-{version}.js",
                   "~/Scripts/q.js",
                   "~/Scripts/globalize.js"));
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"));

    项目目录结构沿用上一篇ASP.NET MVC
重写RazorViewEngine完成多宗旨切换

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

   
高手速来围观扶助答疑~关于ASP.NET MVC Bundling and RequireJS的选择难点,方今相比狐疑,作者愿意有一种办法得以结合双方的优点。作为.NET技术员,难道你未曾过那地点的迷惑吗?

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

  •  当“FileX.min.js” 和“FileX.js” 同有时候存在时,在release版本中,系统将精选文件名包罗“.min”的台本
  • 请选拔文件名中不分包“.min”的文件实行调治。
  • 请过滤文件名中蕴藏“.vsdoc”的公文(如jQuery-1.7.1-vsdoc.js),该文件仅仅用于VS的智能感知提醒。

打开App_Start \BundleConfig.cs文件并查找RegisterBundles方法,该办法是用来成立、注册和布局必要减小和优化的脚本文件的。上边包车型地铁代码展现了有个别RegisterBundles方法。

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

只要一个品种下有如下JavaScript文件:

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

至于开荒职职员和工人具调节和测量检验的越来越多音讯,请参阅MSDN小说选拔开采人士工具调节和测验JavaScript错误.aspx&usg=ALkJrhgQCmu57FL6tKFAP8sDvCjk0d11vA) 。

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

 CDN jQuery 库将代替本地jQuery库。 

注:网址的耗费时间实例是经过Fiddler工具来落实的 。 (从Fiddler的Rules 菜单中选择Performance 然后选取 Simulate Modem Speeds )。

ca88亚洲城网站 8

若果要启用脚本压缩和联合,则设置debug 为false 。你能够通过BundleTable 类的EnableOptimizations 属性来隐蔽Web.config中的设置。 上边包车型客车代码演示了一旦通过BundleTable 来隐藏Web.config文件中的设置: 

合并

{version}关键字是用来含有不一致版本的jQuery库的。 在这一个例子中,使用通配符存在以下多少个好处:

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

    // Code removed for clarity.
   BundleTable.EnableOptimizations = true;
}
 <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>

通配符“*.CSS”可以协作文件夹下全体的CSS文件,包罗Content\themes\base\jquery.ui.all.css 。Jquery.ui.all.css或者在任何文件中一度存在。

在LESS, CoffeeScript, SCSS, Sass中应用脚本优化职能

上面表格展现了剧本被联合压缩后对网址品质进步的震慑。

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

下图呈现了启封了本子合併功效后张开该网站的HTTP恳求情形。

1 选取“脚本 ”选项卡,然后采取“早先调节和测试”按键。

与未优化的网址比较,优化后不光减弱了HTTP央浼头的高低,同期诉求文件的大小也存有分明的滑坡。 分歧文件的滑坡大小是不均等的,该网址的最大的本子文件已经是减弱过的(Scripts\jquery-ui-1.8.11.min.js and Scripts\jquery-1.7.1.min.js) 。 

平日状态下,咱们应有首推通过总体路线来添Gavin件,其缘由如下:

联合的注意事项

 

 ca88亚洲城网站 9

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.
}
<!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方法来引用创立好的包(JavaScript对应了Scripts.Render  而CSS对应的是Styles.Render )。上面包车型大巴代码演示了在Views\Shared\_Layout.cshtml  文件中只要援用CSS和JavaScript的:

现阶段主流浏览器限制客户端对同一域名只好相同的时候提倡6(PS:原来的小说如此)个HTTP连接。 那象征,展开一个网页只可以同一时候加载6个HTTP央求,在同二个域名下别的的伸手将被浏览器加入到哀告队列中。 在IE浏览器中按F12调出开荒职职员和工人具,切换成网络标签,如下图所示,展现的是二个实例网址关于HTTP财富央浼的情形。 

3. 挑选“配置” 开关 ,格式化压缩后的JavaScript,然后选拔“格式后的JavaScript”按键ca88亚洲城网站 10

集合后的连串安装了HTTP过期时间为一年。假诺你再一次展开了三个也没,在服务器的本子为未变动的情状下,服务器将会回去二个HTTP 304状态码,那样浏览器会加载缓存中的文件。 你也得以在IE浏览器下通过按Ctrl + F5来强制刷新页面,这时浏览器会重新央浼文件,并非从缓存中读取(此时服务器响应的HTTP状态码为200)。

原变量

缩短后

imageTagAndImageID

n

imageContext

t

imageElement

i

 ca88亚洲城网站 11

小心 :除非设置EnableOptimizations为true或安装Web.config文件中compilption 节点的debug属性为false,不然程序是不会联合和压缩文件的。 其它,系统也不会挑选压缩过的本子,而是选取调节和测量试验版本。 EnableOptimizations属性的装置将会覆盖Web.config中的设置。

在开拓条件下因为JavaScript脚本不会被削减和集合,所以调节和测量试验JavaScript是件很轻便的事务(在 Web.config文件中compilation节点设置debug=”true” )。你能够调理多个发布版本的JavaScript用于生产条件。 使用IE F12开垦人士工具,调节和测量检验JavaScript脚本的章程如下:

· Howard Dierking

· Adding Web Optimization to a Web Pages Site.

Additional Resources

2 选拔你要调度的台本文件。 

选用通配符“*”来同盟文件

在上边的代码中,在发行版大校使用CDN 上的jQuery库,而本土调节和测验的时候使用本地版本jQuery库。 当使用CDN 版本时,你应该创立三个容错机制,防范CDN加载战败的状态。 上边包车型大巴代码演示了一旦在CDN 中的jQuery库加载失利的情景下怎么加载本地版本。

调整以及压缩Javascript

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

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

一经您的包中留存贰个文书更新,程序会变卦三个新的查询参数来使客户端在下三次访谈的时候取获得最新的版本。在价值观的独自列出文件引用程序中,客户端仅会另行诉求修改过的公文,但是在这种新的秘技下,会再次下载整个包中的文书,因而,假诺您的包平常退换,使用这种统一情势大概并非一个好的挑三拣四。

文本的合併和收缩主假诺为着精雕细刻页面在率先次加载的时候文件下载所成本的岁月。当该页面加载实现,当再一回展开该页面时,浏览器会从缓存中读取那个缓存资源(JavaScript,CSS和图像),所以,在张开同一站点的别的页面,这种方法并不可能加强网址的习性(PS:因为不统一和压缩的文件也足以被缓存)。要是文件的过期设置不精确,浏览器会重复诉求该公文,这种境况下合併和压缩文件会增加非第贰回张开网页的性质。 有关详细新闻,请参阅Using CDNs and Expires to Improve Web Site Performance 。

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

转发请表明原版的书文地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html 

压缩

当您利用Bundle对象来创制三个包时应该用”bundle” 来做前缀,那样能够幸免路由争论 。

使用通配符

匹配到的文件或异常提示

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

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

 上边的图片中展示了当前能源在开端事件中被浏览器参与了央浼队列。因为浏览器同偶然间呼吁限制的熏陶,当前财富必须等待46微秒实现上三个HTTP诉求能力进行当前的伸手。

包缓存

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/, ''));
}

下边包车型地铁图像呈现了在Fiddler中“Caching”选项卡缓存文件的景色 :

 

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

 

合并和压缩后

未压缩和合并

性能提升

HTTP请求数

9

34

256%

发送字节(KB)

3.26

11.92

266%

响应字节(KB)

388.51

530

36%

耗时(ms)

510 MS

780 MS

53%

· Diana LaRose

 

在ASP.NET MVC中行使压缩和归并成效

联合和压缩框架提供了多少个体制来拍卖SCSS 、Sass 、LESSCoffeeScript并改动并联合到优化包中。 譬喻,加多 LESS 文件到您的MVC4品种:

合併和减弱脚本对网址质量的影响

 ca88亚洲城网站 12

在ASP.NET Web窗体和Web Pages中选取脚本合併和减少效能

减掉作用达成了对javascript脚本和CSS进行压缩的功效,它能够去除脚本或样式中不要求的空域和注释,同期能够优化脚本变量名的尺寸。 大家来看下边这段JavaScript函数。

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

· Adding Bundling and Minification to Web Forms.

在本节中,大家将开创二个ASP.NET MVC项目,来体会压缩和归并功能。 首先,创立叁个新的ASP.NET MVC Internet项目名称叫MvcBM ,别的装置私下认可。

透过CDN能够创新浏览器同站点同非凡候乞求限制的主题材料。在CDN遭遇下,客户端将从差异的域名来呼吁暑假,那一年同一网址的财富会被缓存在差别的主机商,从而加快网址张开速度,同期CDN还提供了多少缓存的功力。

 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.

而外剔除注释和多余的空十一分,其变量名也被浓缩为如下那样: 

  • 同意你在不变原本配置的动静下通过NuGet 更新您的jQuery版本。
  • 机动选拔调节和测量试验版本和文件名中包蕴“.min”的批发版本。

· Hao Kung

· Minimize RTT (round-trip times)

4. 你还能通过找寻方法来寻找你需求调弄整理的函数。 在下边包车型大巴图片,在索求输入框中输入AddAltToImg,找寻结果会以高亮情势体现。 

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

诉求的路子为

创制叁个Bundle

 ca88亚洲城网站 13

  • 动用通配符加多脚本其增加顺序是基于文件名的假名排序来家家户户增加的,临时候因为脚本互相正视的状态,这种增进格局恐怕会出错。 CSS和JavaScript文件平日因为相互注重而不能够依照文件名排序来拉长。为了削减潜在的高危机,你能够因而抬高多个自定义IBundleOrderer.aspx&usg=ALkJrhjmJJjY5MAYiMWZy1ms98jPEtjM3g)来添Gavin件,可是经过总体文件名来添Gavin件是最保证的。 举个例子,今后亟需加多新文件时,你也许要因而更动 IBundleOrderer.aspx&usg=ALkJrhjmJJjY5MAYiMWZy1ms98jPEtjM3g)类才干落到实处。
  • 在JavaScript中应用通配符来增添多少个索引的装有脚本到品种中大概会孳生JavaScript的谬误提醒。
  • 在加载CSS文件时,恐怕会出现加载重复的意况,如下所示的事例:

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

    .IncludeDirectory("~/Content/themes/base", "*.css"));
    
<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

· Video: Bundling and Optimizing by Howard Dierking

安插脚本压缩和统一功用

上面包车型大巴代码我们创设了一个新的命名称为~/bundles/jquery 的JavaScript bundle,并含有了安妥的 脚本文件(用于压缩和归并,这里不包涵.vsdoc),还足以通过通配符或着重字来相称脚本文件夹下区别版本的台本文件。 ASP.NET MVC 4 中,系统暗中同意集成了jquery-1.7.1.js 库。在release版本中,系统将采取jquery-1.7.1.min.js 包罗在档期的顺序中。 脚本合併框架服从以下几个尺码:

统一是ASP.NET 4.5中的新作用,使开垦者很轻巧完成把八个文件合併成三个文件。 你能够达成CSS、javascript脚本以及其他文件的联合作用。合併八个公文表示减小了HTTP央浼的个数,同期巩固了页面包车型大巴加载速度。

请留意Render方法的参数是三个字符串或数组类型,它同意你在贰个办法中增多多少个征引。 一般景象下,你能够选用Render方法来机关援用文件而精炼了别的HTML标签。你能够运用Url的办法来生成贰个文本U途胜L相对路线。 若是你想利用的HTML5 异步天性。 下边的代码演示了何等运用Url方法援引Modernizr 包。

相关文章