• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Asp.NetMVC4Bundle捆绑压缩技术

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle、Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术。

很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处:

 

将多个请求捆绑为一个请求,减少服务器请求数

 没有使用Bundle技术,debug下看到的是实际的请求数与路径

 

使用Bundle技术,并且拥有缓存功能
调试设置为Release模式并按F5或修改web.config,就可以看到合并与压缩的效果

 

压缩javascript,css等资源文件,减小网络带宽,提升性能

 

 

 

 

后台配置

  MVC4在架构上有些变动,简化了原来的Global.asax,增加了一些静态的配置文件在App_Start下面,留意下BundleConfig.cs,顾名思义是Bundle的配置,所有它的配置在这里进行就可以了,当然也可以单独的配置文件。

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

                        "~/Scripts/jquery-ui-{version}.js"));

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

 

            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

 

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

 

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

        }

    }

这里大家可以按模块化去配置,我们看到的下面的Url对应的就是上面的bundles.Add(...) 所增加的jscssvirtualPath

需要注意的是不同virtualPath 增加的相同的资源文件,会被重复加载!

前台调用

 对于公共的资源文件,通常我们都会放到_Layout.cshtml (webform中的母板页) 文件中

 
  Script文件引用:@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
   CSS文件引用:  @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>@ViewBag.Title - My ASP.NET MVC Application</title>

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <meta name="viewport" content="width=device-width" />

        @Styles.Render("~/Content/css")

        @Styles.Render("~/Content/themes/base/css")

        <link href="/Content/test.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

 

        <div id="body">...</div>

 

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

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

        @RenderSection("scripts", required: false)

    </body>

</html>

 

正则匹配需要的,过滤不需要的

public static void RegisterBundles(BundleCollection bundles)

{           

    bundles.IgnoreList.Clear();

    bundles.IgnoreList.Ignore("*.debug.js");

    bundles.IgnoreList.Ignore("*.min.js");

    bundles.IgnoreList.Ignore("*-vsdoc.js");

    bundles.IgnoreList.Ignore("*intellisense.js");

 

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                "~/Scripts/jquery-{version}.js")); //匹配jquery版本

 

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                            "~/Scripts/jquery.unobtrusive*",  //匹配文件名前缀为jquery.unobtrusive

                            "~/Scripts/jquery.validate*"));

    ...

}

 

使用CDN

bundles.UseCdn = true; //使用CDN
string jqueryCdn = "http://code.jquery.com/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include(
                        "~/Scripts/jquery-{version}.js"));

cdn服务器挂了或不能访问了,这里就会选择本地的资源文件,debugmvc 会让我们看到他原来的面具,这点非常好利于我们调试。  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Asp.netmvc3-JSONpost&amp;AOP发布时间:2022-07-10
下一篇:
ASP.NETAJAX安装(VS2005下安装)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap