Asp.Net MVC4 BundleConfig文件合并、压缩，网站优化加速

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

具体使用方法

1、注册BundleConfig

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

1
 BundleConfig.RegisterBundles(BundleTable.Bundles);

2、创建分组文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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、使用分组

在视图页面添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>

代码解释：

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

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

4、合并页面请求

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

  1. 将web.config中的编译调试debug设为false  <compilation debug="false" targetFramework="4.5"/>

  2. 在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,

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

1
2
3
4
  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);

如果提示：未能加载 WebGrease.dll ，请查看这里：http://ityouzi.com/archives/mvc-webgrease-error.html

mvc bundle的介绍及使用 转载自 http://www.ityouzi.com/archives/mvc-bundleconfig.html的更多相关文章

  1. 转载 mvc:message-converters简单介绍 https://www.cnblogs.com/liaojie970/p/7736098.html

    mvc:message-converters简单介绍 说说@ResponseBody注解,很明显这个注解就是将方法的返回值作为reponse的body部分.我们进一步分析下这个过程涉及到的内容,首先就 ...

  2. ASP.NET Core MVC – Tag Helpers 介绍

    ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...

  3. windows server 证书的颁发与IIS证书的使用 Dapper入门使用，代替你的DbSQLhelper Asp.Net MVC中Action跳转（转载）

    windows server 证书的颁发与IIS证书的使用   最近工作业务要是用服务器证书验证,在这里记录下一. 1.添加服务器角色 [证书服务] 2.一路下一步直到证书服务安装完成; 3.选择圈选 ...

  4. easyui datagrid 禁止选中行 EF的增删改查（转载） C# 获取用户IP地址（转载） MVC EF 执行SQL语句（转载） 在EF中执行SQL语句（转载） EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)

    easyui datagrid 禁止选中行   没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...

  5. MVC bundle（CSS或JS）

    无论是有asp还是asp.net,还是php做网站经验的都知道当我们需要css或者js文件的时候我们需要在<head></head>标签中间导入我们需要的js或者css文件的路 ...

  6. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  7. 挪过来的spring mvc 的入门 介绍

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  8. C# MVC 用户登录状态判断 【C#】list 去重（转载） js 日期格式转换（转载） C#日期转换（转载） Nullable<System.DateTime>日期格式转换 （转载） Asp.Net MVC中Action跳转（转载）

    C# MVC 用户登录状态判断   来源:https://www.cnblogs.com/cherryzhou/p/4978342.html 在Filters文件夹下添加一个类Authenticati ...

  9. MVC模式的介绍(C#)

    MVC模式的介绍(C#)   Benefits在开发项目中使用“模型-视图-控制器(MVC)”模式的好处在于可以完全消除商业流程和应用表达层之间的相互影响.此外,还可以获得一个完全独立的对象来控制表达 ...

随机推荐

  1. Python-- Redis Set

    一.无序集合 Set操作,Set集合就是不允许重复的列表 1.1 sadd(name, values) # name对应的集合中添加元素 1.2 smembers(name) # 获取name对应的集 ...

  2. CF851 C 暴力

    给出n个5维下的点,求点a不与其它任意的b,c重合,向量ab,ac的夹角都为钝角,这样的点个数,并打印它们. 转换二维下的求角度的函数为五维的,而且由于要求角度大于90度,在二维情况下最多有4个点,也 ...

  3. web开发之Servlet 三

    昨天我们学习了Servlet的运行过程和生命周期,那么今天我们学习下Servlet中非常重要的两个类:ServletConfig  ServletContext 我们可以看到,与顶层Servlet主动 ...

  4. [译]Quartz 框架 教程（中文版）2.2.x 之第二课 Quartz API,Jobs和Triggers简介

    第二课:QuartzAPI,Jobs和Triggers简介 Quartz API Quartz API 关键的几个接口: Scheduler:跟任务调度相关的最主要的API接口. Job:你期望任务调 ...

  5. 【洛谷P2515【HAOI2010】】软件安装

    题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大). 但是 ...

  6. c++刷题（3/100）数独，栈和队列

    stack的基本操作 • s.size():返回栈中的元素数量 • s.empty():判断栈是否为空,返回true或false • s.push(元素):返回对栈顶部“元素”的可变(可修改)引用 • ...

  7. scrapy爬虫框架介绍

    一 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可 ...

  8. JS设计模式——2.初识接口

    什么是接口 接口提供了一种用以说明一个对象应该具有哪些方法的手段. 接口之利 1.接口具有自我描述性从而促进代码的重用 2.接口有助于稳定不同中的类之间的通信方式 3.测试和调试也变得更轻松 接口之弊 ...

  9. Problem D. Berland Railroads Gym - 101967D (思维)

    题目链接:https://cn.vjudge.net/contest/274029#problem/D 题目大意:给你0-9每个数的个数,然后让你找出最大的数,满足的条件是任意三位相连的都能被三整除. ...

  10. 简单响应式Bootstrap框架中文官网页面模板

    链接:http://pan.baidu.com/s/1o7MQ6RC 密码:kee5