详解Asp.Net MVC的Bundle捆绑
大多数浏览器会对同一域名的请求限制请求数量，一般是在8个以内。每次最多可以同时请求8个，要是资源多于8个，那么剩下的就要排队等待请求了。所以为了提高首次加载页面的速度。提高请求并发请求数量，降低请求次数就是一个很重要的点。
Bundle
Asp.Net MVC4和.NET Framework4.5提供了支持捆绑和压缩的新类库System.Web.Optimization。
该类库提供了如下特性：
捆绑-将多个资源文件（javascript,css）合并成一个单独的文件，但是合并成的单独文件必须是相同类型，要么都是JavaScript要么都是CSS。
压缩资源文件-清理空格，换行等，压缩文件大小。
自动清理缓存-服务端更新资源时，客户端不再使用缓存资源，而是重新从服务端缓存。
1. 定义Bundle
在App_Start文件中新增一个BundleConfig.cs文件。实现静态RegisterBundles方法。该方法用来创建，注册和配置bundle。（在该目录下代码最好把他们的命名空间去掉 ".App_Start"，保持一个统一的高等级的命名空间）。
调用BundleCollection.Add()方法添加捆绑资源，该方法参数为ScriptBundle或StyleBundle。
ScriptBundle和StyleBundle需要传递一个虚拟路径给构造函数。该虚拟路径其实就是该捆绑的名称或者标识符。所以该虚拟路径可以任意设置，并不需要匹配物理路径。Bundle的Include方法包含一个或者多个脚本。
通过引用该虚拟路径就可以使用这些捆绑的资源@Script.Render("~/bundles/jquery")。
Debug模式下默认没有开启捆绑和压缩，发布模式下默认是开启的。
public static void RegisterBundles(BundleCollection bundles)
{
//该值为true，在任何模式下都使用捆绑和压缩。
//BundleTable.EnableOptimizations = true;
//添加名称为“~/bundles/jquery”脚本捆绑
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
//添加名称为“~/Content/css”样式捆绑
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css"));
}
使用{version}占位符可以在使用NuGet更新Jquery版本时，不需要更新Bundle的引用，自动使用最新的Jquery版本。
ScriptBundle和StyleBundle的Include方法参数是一个字符串类型的数组，所以一个Bundle实例可以添加多个文件。
bundles.Add(new StyleBundle("~/Content/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"));
但是Bundle类也提供了IncludeDirectory方法，可以添加指定目录下的指定文件。
//添加Content/themes/base目录下的所有css文件
bundles.Add(new StyleBundle("~/Content/css"").IncludeDirectory("~/Content/themes/base", "*.css"));
使用通配符要注意：
使用通配符添加资源时。这些资源文件是按照名称来排序的。
2. 启用Bundle
在Global.asax的Appliaction_Start方法中调用之前的定义的方法，BundleConfig.RegisterBundles(BundleTable.Bundles)
启用Bundle。
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
3. 使用Bundle
如果我们需要在页面中使用这些资源时。可以通过Styles和Scripts来引入。如果要使用捆绑的Style，可以在页面中添加@Styles.Render("~/Content/css")。如果要使用捆绑的Script，可以在页面中添加@Script.Render("~/bundles/jquery")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
//引入样式捆绑
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>
//引入js捆绑
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
可以把CSS样式文件置顶，JavaScript文件置底，来优化网页。但是modernizr.js文件要放在页面顶部，因为有些样式文件需要。
使用CDN
Bundle对CDN也提供了很好的支持。
public static void RegisterBundles(BundleCollection bundles)
{
//bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
// "~/Scripts/jquery-{version}.js"));
bundles.UseCdn = true; //启用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"));
}
在使用CDN时，要应对没有获取到资源的情况。
@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>
Bundle缓存
浏览器是根据URL来缓存数据的。浏览器无论何时请求资源，都会根据URL来检查缓存里是否包含了该资源文件。如果包含了，浏览器就不会再去请求，而是使用缓存的文件，来渲染。
Bundle机制使我们每次修改资源文件时都会在URL后自动添加一个哈希值,从而避免浏览器缓存，不能及时更新资源的情况。
v=******，后面的值就是哈希值。Bundle 在Debug模式下默认是没有开启的。在发布模式下才会开启。但是我们可以在BundleConfig下添加BundleTable.EnableOptimizations = true;开启捆绑模式。
Bundle注意事项
一个Bundle一般包含多个文件，如果我们只是修改了其中的一个文件，那么Bundle的哈希值也会改变，就会更新Bundle的所有文件。
捆绑和缩小主要降低了第一次访问页面时加载的时间。此时静态资源就会被缓存起来（js,css，图片）。当访问其他页面，且该页面的资源地址和第一次访问的地址相同时，就会从缓存里获取，不再向服务端获取。
如果资源过多，使用CDN，比使用Bundle更有效。当然Bundle也可以结合CDN使用。 通过使用CDN，可以减轻每个主机名8个并发连接的浏览器限制。因为CDN的主机名与您的主机站点不同，CDN上的资产请求不会与您的主机环境的8个并发连接数计数。
Bundle最好按照功能来区分捆绑。例如，默认的ASP.Net应用程序的NET MVC模板创建了一个与jQuery分离的jQuery验证包。因为所创建的默认视图输入输出值，所以它们需要验证包。
相关推荐
-
ASP.NET MVC API 接口验证的示例代码
项目中有一个留言消息接口,接收其他系统的留言和展示留言,参考了网上的一些API验证方法,发现使用通用权限管理系统提供的验证方法最完美. 下面将实现的完整思路共享 1.WebApiConfig全局处理 /// <summary> /// WebApiConfig /// 路由基础配置. /// /// /// 修改记录 /// /// 2016.11.01 版本:2.0 宋彪 对日期格式进行统一处理. /// 2016.10.30 版本:2.0 宋彪 解决json序列化时的循环引用问题. ///
-
Asp.net mvc验证用户登录之Forms实现详解
这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_Start文件夹下面有一个FilterConfig.cs,在这个文件中可以注册全局的过滤器.我们在文件中添加AuthorizeAttribute过滤器如下: public class FilterConfig { public static void RegisterGlobalFilters(Glo
-
Asp.Net中MVC缓存详解
本文通过介绍了Asp.Net中MVC缓存的种类,以及他们之间的区别等内容,让学习者能够深入的了解MVC缓存的原理机制,以下是具体内容: 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术.当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝. Web应用缓存技术大体上可以分为两类:服务端缓存和客户端缓存.两种目标都是减少重复性内容的生成和网络传输工作,因为缓存数据存储的位置不同,而分为服务端缓存和客户端缓存. 服务端缓存 服务端缓存技术关注于服务端数据查询,生成或者操作
-
IIS部署asp.net mvc网站的方法
iis配置简单的ASP.NET MVC网站,供大家参考,具体内容如下 编译器:VS 2013 本地IIS:IIS 7 操作系统:win 7 MVC版本:ASP.NET MVC4 sql server版本: 2008 r2 打开VS 2013,新建一个MVC项目(Internet版的),然后在本地上运行测试下,应该可以.随后配置iis 7: 看看simple_mvc 下的内容(如果这里没有配置正确,就会出现分析器问题!): 先配置下目录浏览: 由于是MVC项目,我们可以不用配置默认文档 然后我们浏
-
ASP.NET MVC下自定义错误页和展示错误页的方式
在网站运行中,错误是不可避免的,错误页的产生也是不可缺少的. 这几天看了博友的很多文章,自己想总结下我从中学到的和实际中配置的. 首先,需要知道产生错误页的来源,一种是我们的.NET平台抛出的,一种是网站所依赖的宿主抛出的,一般来讲我们所依赖的宿主就是IIS了. IIS中的错误页入口: 其中的错误码想必并不陌生 这里是在服务器上找不到所需资源时抛出的错误页,在这里可以设置需要展示的错误页面,只需将预定的错误页面加入服务器中,然后在指定状态码下配置路径即可. 这是请求在IIS中时,还未完全进入到a
-
ASP.NET MVC4异步聊天室的示例代码
本文介绍了ASP.NET MVC4异步聊天室的示例代码,分享给大家,具体如下: 类图: Domain层 IChatRoom.cs using System; using System.Collections.Generic; namespace MvcAsyncChat.Domain { public interface IChatRoom { void AddMessage(string message); void AddParticipant(string name); void GetM
-
asp.net mvc webapi 实用的接口加密方法示例
在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, 今天我们不打算介绍这方面的知识,我们说说一个较简单也较常见的安全交换机制 在这里要提醒读者,目前所有的加密机制都不是绝对的安全! 我们的目标是,任何用户或者软件获取到我们的webapi接口url后用来再次访问该地址都是无效的! 达到这种目标的话,我们必须要在url中增加一个时间戳,但是仅仅如此还是不
-
asp.net mvc CodeFirst模式数据库迁移步骤详解
利用Code First模式构建好基本的类后,项目也开始搭建完毕并成功运行,而且已经将数据库表结构自动生成了. 但是,我有新的类要加入,有字段需要修改,那怎么办呢,删库,跑路 ? 哈哈 利用数据库迁移,将原有结构不改动,将新建类进行单独建表操作,或者是已有数据库表,改变字段,那就修改表. 迁移步骤: 1.打开程序包管理器控制台:工具->NuGet包管理器->程序包管理器控制台.(当然还有其它方式也可以打开,我比较喜欢这种) 点击后将弹出程序包管理器控制台 极其要注意的是默认项目!!! 2.启动
-
Asp.net MVC scheduler的实现方法详解
Asp.net MVC scheduler的实现方法详解 本例使用了fullcalendar js : https://fullcalendar.io/ 1. view : @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section PageContent{ <style> .modal-backdrop { z-index: 9; } </sty
-
详解Asp.Net MVC的Bundle捆绑
大多数浏览器会对同一域名的请求限制请求数量,一般是在8个以内.每次最多可以同时请求8个,要是资源多于8个,那么剩下的就要排队等待请求了.所以为了提高首次加载页面的速度.提高请求并发请求数量,降低请求次数就是一个很重要的点. Bundle Asp.Net MVC4和.NET Framework4.5提供了支持捆绑和压缩的新类库System.Web.Optimization. 该类库提供了如下特性: 捆绑-将多个资源文件(javascript,css)合并成一个单独的文件,但是合并成的单独文件必须是
-
详解ASP.NET MVC的整个生命周期
目录 一.介绍 二.MVC生命周期详述 View的初始化和渲染呈现 三.结束 一.介绍 我们做开发的,尤其是做微软技术栈的,有一个方向是跳不过去的,那就是MVC开发.我相信大家,做ASP.NET MVC 开发有的有很长时间,当然,也有刚进入这个行业的.无论如何,如果有人问你,你知道ASP.NET MVC的生命周期吗?你知道它的来世今生吗?你知道它和 ASP.NET WEBFORM 有什么区别吗?估计,这些问题,有很多人会答不上来,或者说不清楚.今天,我就把我的理解写出来,也是对我自己学习的一次回
-
详解ASP.NET MVC 解析模板生成静态页（RazorEngine）
简述 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.在早期的MVC版本中默认使用的是ASPX模板引擎,Razor在语法上的确不错,用起来非常方便,简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目. 我们在很多项目开发中会常常用到页面静态化,页面静态化有许多方式,最常见的就是类似很多PHP CMS种使用的 标签替换的方式(如:帝国CMS.EcShop等),还有很多都是伪静态,伪静态我们就不做过多解释,通过路由或Url
-
详解ASP.NET MVC 利用Razor引擎生成静态页
最近在研究ASP.NET MVC生成静态页,那么今天也算个学习笔记吧! 实现原理及步骤: 1.通过ViewEngines.Engines.FindView查找到对应的视图,如果是部分视图,则用:ViewEngines.Engines.FindPartialView: 2.设置上下文对象里的Model: 3.调用视图的Render()方法,将渲染结果保存到物理静态文件: using System; using System.IO; using System.Text; using System.W
-
详解ASP.NET MVC下的异步Action的定义和执行原理
Visual Studio提供的Controller创建向导默认为我们创建一个继承自抽象类Controller的Controller类型,这样的Controller只能定义同步Action方法.如果我们需要定义异步Action方法,必须继承抽象类AsyncController.这篇问你讲述两种不同的异步Action的定义方法和底层执行原理. 一.基于线程池的请求处理 ASP.NET通过线程池的机制处理并发的HTTP请求.一个Web应用内部维护着一个线程池,当探测到抵达的针对本应用的请求时,会从池
-
详解ASP.NET MVC的筛选器
在ActionInvoker对Action的执行过程中,除了通过利用ActionDescriptor对Action方法的执行,以及之前进行的Model绑定与验证之外,还具有一个重要的工作,那就是对相关筛选器(Filter)的执行.ASP.NET MVC的筛选器是一种基于AOP(面向方面编程)的设计,我们将一些非业务的逻辑实现在相应的筛选器中,然后以一种横切(Crosscutting)的方式应用到对应的Action方法.当Action方法执行前后,这些筛选器会自动执行.ASP.NET MVC提供了
-
详解ASP.NET MVC 常用扩展点：过滤器、模型绑定
一.过滤器(Filter) ASP.NET MVC中的每一个请求,都会分配给对应Controller(以下简称"控制器")下的特定Action(以下简称"方法")处理,正常情况下直接在方法里写代码就可以了,但是如果想在方法执行之前或者之后处理一些逻辑,这里就需要用到过滤器. 常用的过滤器有三个:Authorize(授权过滤器),HandleError(异常过滤器),ActionFilter(自定义过滤器),对应的类分别是:AuthorizeAttribute.Han
-
详解ASP.NET MVC之下拉框绑定四种方式
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式. 话题引入 一般在下拉框中绑定数据的话,分为几种情况. (1)下拉框中的数据是写死的,我们直接给出死代码即可. (2)下拉框中的数据从数据库中读取出来,从而进行显示. (3)下拉框中直接用枚举显示. (4)下拉框中一个选择的值改变另外一个下拉框中的值. 关于下拉框中绑定
-
详解Asp.Net MVC——控制器与动作(Controller And Action)
一.理解控制器 1.1.什么是控制器 控制器是包含必要的处理请求的.NET类,控制器的角色封装了应用程序逻辑,控制器主要是负责处理请求,实行对模型的操作,选择视图呈现给用户. 简单理解:实现了IController接口,修饰符必须是public,不能是抽象的,不能是泛型的,类名必须以Controller结尾. 在MVC框架中,控制器类必须实现System.Web.Mvc命名空间下的IController接口,如上图所示,这是一个非常简单的接口,该接口仅有一个Execute方法,当请求该控制器时E
-
详解ASP.NET MVC 下拉框的传值的两种方式
以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS