.net MVC BundleConfig.cs 合并js和css文件说明文档

最新推荐文章于 2024-04-08 00:20:47 发布

七大爷爷

最新推荐文章于 2024-04-08 00:20:47 发布

阅读量1k

点赞数

分类专栏： ASP.net

ASP.net 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

浏览器在向服务器发送请求的时候，请求的文件链接数量是有限制的，如果页面文件少就没有什么问题了，如果文件太多就会导致链接失败等等问题。针对这个问题MVC4中增加了新功能：BundleConfig.cs，使用BundleConfig可以将多个文件请求和并成一个请求，去除文件中的一些注释、空白、压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。

具体使用方法

1、注册BundleConfig

在global.asax文件中的Application_Start()方法中添加以下代码

 
        BundleConfig.RegisterBundles(BundleTable.Bundles);

2、创建分组文件

打开：App_Start/BundleConfig.cs 文件，里面有些系统默认的方法（如果是自己创建的文件是没有的，可以通过创建一个非空的MVC项目来查看）

 
        public  
        class  
        BundleConfig   
       
        {   
       
        // 有关 Bundling 的详细信息，请访问 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" 
        ));   
       
        //JS文件 
       
        bundles.Add( 
        new  
        ScriptBundle( 
        "~/bundles/jqueryval" 
        ).Include(   
       
        "~/Scripts/jquery.unobtrusive*" 
        ,   
       
        "~/Scripts/jquery.validate*" 
        ));   
       
        // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好   
       
        // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。   
       
        bundles.Add( 
        new  
        ScriptBundle( 
        "~/bundles/modernizr" 
        ).Include(   
       
        "~/Scripts/modernizr-*" 
        ));   
       
        //CSS文件 
       
        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" 
        ));   
       
        }   
       
        }

代码解释：

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

"~/bundles/jquery" ：表示分组的文件路径（也就是产生一个虚拟的文件夹）。

"~/Scripts/jquery-{version}.js" ：表示该分组包含的具体文件，是项目实际存在的文件。如果有多个文件参考代码中下面的写法。 {version}参数代表版本号 ,*代表所有，这两个是可以理解为通配符。

代码中的其它几个add意思是一样的。根据不同的文件类型等创建不同的分组，比如js文件创建一个分组，css创建一个分组等。

3、使用分组

在视图页面添加代码

 
        <!DOCTYPE html>   
       
        <html>   
       
        <head>   
       
        <meta charset= 
        "utf-8"  
        />   
       
        <meta name= 
        "viewport"  
        content= 
        "width=device-width"  
        />   
       
        <title>@ViewBag.Title</title>   
       
        <!--Style 分组代码调用  名称就是定义的分组文件名称 --> 
       
        @Styles.Render( 
        "~/Content/css" 
        )   
       
        <!--JavaScript 分组代码调用  名称就是定义的分组文件名称 --> 
       
        @Scripts.Render( 
        "~/bundles/modernizr" 
        )   
       
        </head>   
       
        <body>   
       
        @RenderBody()  
       
        <!--JavaScript 分组代码调用  名称就是定义的分组文件名称 --> 
       
        @Scripts.Render( 
        "~/bundles/jquery" 
        )   
       
        @RenderSection( 
        "scripts" 
        , required:  
        false 
        )   
       
        </body>   
       
        </html>

代码解释：

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

其中的“~/bundles/jquery” 是上面定义的文件分组名称

4、合并页面请求

接下来我们通过分组将请求多个文件合并成请求一个，可以使用如下两种方法来实现：

将web.config中的编译调试debug设为false <compilation debug="false" targetFramework="4.5"/>
在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true; （建议使用这个方法），

配置完成以后刷新页面，就可以看到：

src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"

解释：?前面是分组名称，后面是多个文件合并后生成的哈希码

可以要通过火狐的firebug或者是谷歌浏览器查看合并前后的效果，看着加载文件数量和加载速度还是有很大提升的。

5、其它注意事项

1、使用中注意区分Js和css文件，产生分组的方法和前台调用的方法名称都是不一样的，详细请看上面的代码

2、默认情况下BundleTable.Bundles会过滤掉后缀名为这些的文件：

,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,

当加载后缀名为这些的文件，将显示空白。可以用如下方法去除对这些文件过滤限制

 
        BundleTable.Bundles.IgnoreList.Clear();    
       
        BundleTable.Bundles.IgnoreList.Ignore( 
        ".min.js" 
        , OptimizationMode.Always);   
       
        //BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);    
       
        //BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);