System.Web.Optimization对脚本和样式表的操作
这个也是本章重点向描述的部分,首先我们可以使用VS2012RC来新建一个MVC4.0项目,版本可以为4.0或4.5。在Global.asax文件代码中,我们发现已经把过滤器,路由器,以及对样式表和脚本捆绑(Bundles)移到了其他页面,就是在根目录下的App_Start文件夹内。代码只是简简单单的几行,代码如下
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing; namespace MVC4
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801 public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
而在App_Start目录下多了3个文件,他们分别是RilterConfig.cs,RouteConfig.cs以及BundleConfig.cs文件。在BETA版本中还是直接写在Global.asax文件中,从名称上就可以知道他们各自的功能,今天我们主要了解BundleConfig.cs文件的内容和功用。
在BundleConfig.cs文件中,包含了一些应用程序中使用的脚本和样式表的文件路径,其中可以使用通配符,具体代码如下所示:
using System.Web;
using System.Web.Optimization; namespace MVC4
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*")); 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"));
}
}
}
这些都是关于Bundle的应用,从代码中就可以看到,Bundle实例对象(Script和Style)中包含一个虚拟目录,这个目录可以在页面中使用时作为唯一键引入。当然在实现优化时,这个虚拟目录将呈现在前台页面中,这个后面将继续讲述。下面我们来看一下在代码中如何使用他们,在System.Web.Optimization程序集中包含了Scripts和Styles两个类,分别用于呈现Bundle集合中的脚本和样式表,代码如下:
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
从上面就可以看出,往页面中引入了两个捆绑的样式表和一个脚本,这些引入是包含了所有Include方法内的文件,调试一下看看前台HTML代码就知道了。而他们中的另一个方法Url则是对外部文件的引入,例如CDN中的文件,如:Google等等API文件。
四:对样式表和脚本的优化
这项其实也是包含在三中的,我独立出来,最主要感觉是我觉得他是个不错的家伙。代码简单,但是非常的适用,不知道大家有没有使用过AjaxMinify这个东东,可以把脚本编译,压缩成最小的内容。不过都是要使用命令的,然而在MVC4.0中System.Web.Optimization已经包含了这个东东,他们就是JsMinify和CssMinify,不要小看这两个类,虽然公开的方法就两个。
按照上述方法是用Scripts和Styles将脚本和样式表引入页面时,无需修改任何代码就可以将脚本和样式表编译压缩输入到客户端,这样不仅可以有效的增加JSHack的难度以及降低文件的大小。为了达到这个目的,我们只需要将BundleTable中的一个属性设置为true即可,代码如下:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing; namespace MVC4
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801 public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleTable.EnableOptimizations = true;
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
System.Web.Optimization对脚本和样式表的操作的更多相关文章
- System.Web.Optimization对脚本和样式表的压缩操作
1 是否允许样式表压缩 BundleTable.EnableOptimizations = true; 在MVC项目中的 BundleConfig操作中是微软已经给我们准备好的CSS和JS压缩,我们可 ...
- 第四章 在MVC4.0中对脚本以及样式表的引用变化
原文:http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 一.可以直接使用“~”,而无需使用Href对象 ...
- Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩
最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...
- System.Web.Optimization 合并压缩技术的使用
捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...
- 空MVC项目找不到System.Web.Optimization的处理办法
install-package Microsoft.AspNet.Web.Optimization Create the bundle in Global.asax Application_Start ...
- asp.net mvc4 System.Web.Optimization找不到引用
在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...
- MVC项目内无法添加System.Web.Optimization
MVC项目内无法添加System.Web.Optimization Nuget:Install-PackageMicrosoft.AspNet.Web.Optimization
- System.web.optimization 在 Asp.Net WebForm 中应用得注意了
我们也可以在Asp.Net WebForm项目中去使用Optimization,去处理我们的资源文件,从而起到优化网站性能的效果,前端知识得从小事做起.但是在使用过程中我却发现了下面的问题. 第一步: ...
- .net mvc System.Web.Optimization 、System.Data.Entity.Infrastructure找不到
在MVC4的开发中,如果在App_Start目录下BundleConfig.cs类没有找不到引用System.Web.Optimization,可以使用程序包管理控制台进行安装到使用的项目 打开 工具 ...
随机推荐
- 常用CSS实例
为表格设置合并边框模型: border-collapse:collapse 规定单元格之间的空间: cellspacing:0 规定内侧边框的哪个部分是可见的: rules:all
- Android硬件抽象层(HAL)深入剖析(一)【转】
作为一个搞android驱动或者说搞底层的人,我觉得对于hal那是必须要掌握的,而且必须达到一定深度,于是我总结了一下,将整个自己的分析思路写下来. 主要是看android源代码,根据源代码得到的思路 ...
- RxJava/RxAndroid 使用实例实践
原文地址 RxAndroid Tutorial响应式编程(Reactive programming)不是一种API,而是一种新的非常有用的范式,而RxJava就是一套基于此思想的框架,在Android ...
- Fiddler——PC上实现手机的抓包(转载 http://www.jianshu.com/p/13f8a81d7c7c)
Fiddler是15年初,在千牛中做超级促销插件时,发现没有root的Android机和没有越狱的iPhone无法修改host,因此没办法测试.为了让我这个磨人的PD也能看到,开发推荐了Fiddler ...
- Struts2 Web Project 实现中文、英语的切换
1.struts.xml文件部分配置: <package name="default" namespace="/login" extends=" ...
- UML与ER图
UML 统一建模语言(Unified Modeling Language, UML)是一种描述软件系统结构的图形化语言. 类图 类图用于描述类之间的关系,类图中主要的关系包括: 聚集 带空心菱形的实心 ...
- OpenDigg前端开源项目月报201704
由OpenDigg 出品的前端开源项目月报第一期来啦.我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具. reactide Rea ...
- Vertica示例数据库安装
1.示例数据库简介: Vertica跟传统数据库一样,自带了示例数据库--VMart示例数据库,是一个多架构数据库.该数据是大型超市(VMart)中可能会用到的数据库,可用来访问产品.客户.员工以及网 ...
- MFC动态时间表示法——strtime函数
%a 星期几的简写 %A 星期几的全称 %b 月分的简写 %B 月份的全称 %c 标准的日期的时间串 %C 年份的后两位数字 %d 十进制表示的每月的第几天 %D 月/天/年 %e 在两字符域中,十进 ...
- vue中watch数组或者对象
1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...