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,可以使用程序包管理控制台进行安装到使用的项目 打开 工具 ...
随机推荐
- Redis笔记(三):Redis常用命令
连接测试 连接本地服务器 语法 $ redis-cli 实例 启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis ...
- SpringCloud源码解读
http://blog.didispace.com/Spring-Cloud%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/
- BI实战派:医疗BI项目落地方案
任何BI项目面临的两大难题是项目价值和基础数据,BI项目应该给企业带来管理优化.业绩增长.医院面临的两大难题,一:绩效管理(奖金分配):二:医患关系:在医院开始自负盈亏时日常基本运营管理显得非常重要. ...
- activiti 临时笔记mark
public class TenMinuteTutorial { public static void main(String[] args) { // Create Activiti process ...
- 【转】CSS3的calc()使用——精缩版
问题:在制作页面的时候,总会碰到有的元素是100%的宽度.如果元素宽度是100%时,只要在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模 ...
- Python urllib简单使用
Python的urllib和urllib2模块都做与请求URL相关的操作. 它们最显著的差异为: urllib2可以接受一个Request对象,并以此可以来设置一个URL的headers,但是urll ...
- CSS 通过使用Important覆盖所有其他样式
在许多情况下,您将使用CSS库.这些可能会意外覆盖您自己的CSS.所以当你绝对需要确定一个元素具有特定的CSS时,可以使用 !important. 让我们回到之前的 pink-text class 声 ...
- MyEclipse设置选中单词其它同名单词前景色和背景色
General->Editors->Annotations->Occurrences
- Android全屏的两种方法
在开发中我们经常需要把我们的应用设置为全屏,这里我所知道的有俩中方法,一中是在代码中设置,另一种方法是在配置文件里改! 一.在代码中设置: [java] view plain copy package ...
- 封装framework注意点
1.新建一个framework过程: . 2.在工程内新建一些类,注意,使用xib时初始化必须要加上loadnib:,否则会造成xib无效(可能是因为没有加载) 如下: JFViewControlle ...