ASP.NET MVC 4 捆绑和缩小实例介绍_实用技巧

在 ASP.NET MVC 4 中可捆绑多个 css 和 js 文件以减少HTTP请求,并对 css 和 js 文件进行压缩(缩小),这样可提高网站的加载速度。我们选取博客园的 css 文件来看看,在 ASP.NET MVC 4 前,我们引入 css 方法如下:

复制代码 代码如下:

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

在 IE 中使用 F12 查看结果,如图:

在 ASP.NET MVC 4 中,使用下边写法引入 css 文件:

<link href="/Content/css" rel="stylesheet" />

重新运行,结果如下:

可以清楚的看到,在 ASP.NET MVC 4 中使用新方法引入 css 时,网站运行时不仅合并了 css 文件而且压缩了 css 中的代码。双击 css 文件,在响应正文中可以看到:

对 js 文件的处理方式同 css 相同,引入方法如下:

复制代码 代码如下:

<script src="/Scripts/js"></script>

ASP.NET MVC 4 中捆绑时,css 排序规则为:先加载 reset.css、normalize.css,其他文件按首字母排序,类似地 js 排序规则为 jquery.js、jquery-ui.js 其他文件同样按首字母排序。有时我们需要在不同页面加载不同的 css 或 js 文件,以减少不必要的文件,下边就让我们看看怎么自定义一个捆绑。

在 Global.asax.cs 文件 Application_Start() 中添加如下代码:

复制代码 代码如下:

//定义名为"mycss"的捆绑,js对应为 new JsMinify()
var b = new Bundle("~/mycss", new CssMinify());
//添加Content文件夹下的所有css文件到捆绑
//第三个参数false表示,Content文件夹下的子文件夹下不添加到捆绑
b.AddDirectory("~/Content", "*.css", false);
//添加到BundleTable
BundleTable.Bundles.Add(b);

这样在需要使用的页面,加入下边的代码即可:

复制代码 代码如下:

<link href="/mycss" rel="Stylesheet" />

总结:ASP.NET MVC 4 捆绑和缩小功能,使得减少 http 请求和压缩 js、css 文件变得非常简单,这样不需要我们手动来合并 js、css 文件,也不需要使用工具来压缩这些文件,使得 js、css 文件的管理变得简单,易于维护,从而将我们从重复的工作中解脱出来。

作者:东奎

时间: 2024-10-08 10:42:15

ASP.NET MVC 4 捆绑和缩小实例介绍_实用技巧的相关文章

asp.net MVC实现无组件上传图片实例介绍_实用技巧

例子: 如我想上传一个图片到服务器端:asp页面 复制代码 代码如下: <form id="form1" runat="server" action="/bookIndex/fileUpLoad/(你准备处理的 ActionResult)" method="post" enctype="multipart/form-data"> <input type="file" i

ASP.NET MVC中的视图生成实例分析_实用技巧

本文实例分析了ASP.NET MVC中的视图生成过程.分享给大家供大家参考.具体如下: 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通常,在 Controller 中,我们定义多个 Action ,每个 Action 的返回类型一般是 ActionResult,在 Action 处理的最后,我们返回对于视图的调用. 复制代码 代码如下: pub

ASP.NET MVC下拉框联动实例解析_实用技巧

两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上           这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDownList上面,即实现了联动. 好了,这里不打算使用EF了,换用ADO.NET.首先新建好数据库,表: USE master GO IF EXISTS (SELECT * FROM sysdata

基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍_实用技巧

很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle.Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术. 很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处: 将多个请求捆绑为一个请求,减少服务器请求数  没有使用Bundle技术,debug下看到的是实际的请求数与路径   使用Bundle技术,并且拥有缓存功能调试设置为Release模式并按F5或修改

ASP.NET MVC中使用JavaScriptResult的用法示例_实用技巧

本文实例讲述了ASP.NET MVC中使用JavaScriptResult的用法.分享给大家供大家参考,具体如下: 在页面中我们使用JavaScript来设置id为qubernet的span标签样式,具体代码如下: JS: <script> $(function () { var thisObj = document.getElementById("qubernet"); thisObj.setAttribute("style", "color

ASP.NET MVC的四种验证编程方式_实用技巧

我们可以采用4种不同的编程模式来进行针对绑定参数的验证. 一.手工验证绑定的参数 在定义具体Action方法的时候,对已经成功绑定的参数实施手工验证无疑是一种最为直接的编程方式,接下来我们通过一个简单的实例来演示如何将参数验证逻辑实现在对应的Action方法中,并在没有通过验证的情况下将错误信息响应给客户端.我们在一个ASP.NET MVC应用中定义了如下一个Person类作为被验证的数据类型,它的Name.Gender和Age三个属性分别表示一个人的姓名.性别和年龄. public class

基于ASP.NET MVC的ABP框架入门学习教程_实用技巧

为什么使用ABP我们近几年陆续开发了一些Web应用和桌面应用,需求或简单或复杂,实现或优雅或丑陋.一个基本的事实是:我们只是积累了一些经验或提高了对,NET的熟悉程度. 随着软件开发经验的不断增加,我们发现其实很多工作都是重复机械的,而且随着软件复杂度的不断提升,以往依靠经验来完成一些简单的增删改查的做法已经行不通了.特别是用户的要求越来越高,希望添加的功能越来多,目前这种开发模式,已经捉襟见肘.我很难想象如何在现有的模式下进行多系统的持续集成并添加一些新的特性. 开发一个系统时,我们不可避免的

ASP.NET MVC自定义错误页面真的简单吗?_实用技巧

如果你在设置asp.net mvc自定义错误页面时遇到问题,这并不止你一个人.惊讶之余你的做法是正确的,没有起到作用的原因是其一部分错误是由asp.net管道处理的,另一部分是由iis直接处理. 通常情况 (我期望是这种情况,在一些其他框架/服务器上) 我们只需要在一个地方配置自定义错误页就可以了,无论怎么哪儿引发的错误.就像这样︰ <customErrors mode="On"> <error code="404" path="404.

ASP.NET MVC文件上传教程(二)_实用技巧

上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再