asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
Bundling and Minification两个单词对今天的内容有个比较好的总结。
问题所在
一、 在asp.net包括mvc项目中,引入js和css也许有人认为是个很容易和很简单操作的事情,vs自带的拖动功能可以很简单的实现引入工作,甚至不需要编写任何代码,但是这样会导致路径问题,母版页和用户控件的问题尤为严重。
二、由于现在web项目的庞大,页面往往需要加载很多未压缩的js和css导致页面加载速度很慢。当然也可以在发布时进行js和css的压缩和合并工作,这样无疑给程序员带来了更多的麻烦。
以上问题就是今天要解决的问题,当然微软已经为我们做了很多工作,我们要做的就是运用他。
Bundling
配置
在新建mvc4的项目中我们会发现比mvc以前项目多个App_Start文件夹,会有BundleConfig.cs文件。在Global.asax中的Application_Start方法中会调用BundleConfig.cs的方法,我们需要做的就是了解BundleConfig.cs的内容。
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")); 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-*")); 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"));
}
}
我们会发现代码中有很多绑定了js和css,因为路径用到了绝对路径,所有我们不用考虑路径带来的问题。
我们要在这里配置我们需要的js和css,在这里我们也可以对js和css进行分类命名,比如bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));因为在进行验证时需要jquery.validate.js和jquery.validate.unobtrusive.js两个js的引用。 关于jquery validate unobtrusive 验证
前台引入
Razor试图
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
webform视图
<%=@Styles.Render("~/Content/css")%>
<%=@Scripts.Render("~/bundles/jquery")%>
以上代码就可以简单的实现对css和js的引入
我们也可以
<script src='@Scripts.Url("~/bundles/jquery")'></script>引入
Styles.Render和Scripts.Render支持多个参数的传入,如果需要引入多个js,只需要一行代码就可以搞定。Scripts.Render("~/bundles/jquery","~/bundles/jqueryval")
我们页面的源码中就可以看到
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script>
在BundleConfig.cs代码中我们看到有许多的*和{version},*是通配符{version}代表引入js和css的版本,用{version}的优点在于我们更新js和css时不用更改配置。
只要两步我们就轻松实现js和css的引入,完全不用考虑路径和需要引入哪些js和css(我们可以在配置中配置哪些功能需要哪些js和css,然后进行命名)的问题。
Minification
压缩合成js和css也许我们在项目运行中没有发现压缩和合成的代码,那是因为如果在发布前压缩和合成了我们就没办法调试js和css了
我们要做的就是把web.config的debug为false即可<compilation debug="false" targetFramework="4.0" />,其实这一项再发布网站时是必做的。所以我们不需要再为js和css的Minification做任何事情。
当然我们也可以在debug为true时看到MInification的代码,设置BundleTable.EnableOptimizations为true即可。
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js")); // Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
再次运行网站我们会发现页面的源码有所改变
<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>
<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>
机制会把我们分类的js和css合并压缩成一个js和css,这正是我们需要的。
mvc4的Bundling and Minification可以很简单的实现我们需要的工作。
asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )的更多相关文章
- asp.net mvc4 System.Web.Optimization找不到引用
在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...
- System.web.optimization 在 Asp.Net WebForm 中应用得注意了
我们也可以在Asp.Net WebForm项目中去使用Optimization,去处理我们的资源文件,从而起到优化网站性能的效果,前端知识得从小事做起.但是在使用过程中我却发现了下面的问题. 第一步: ...
- 在ASP.NET Web Forms中用System.Web.Optimization取代SquishIt
将一个ASP.NET Web Forms项目从.NET Framework 4.0升级至.NET Framework 4.5之后,发现SquishIt竟然引发了HTTP Error 500.0 - I ...
- MVC4删除 pages引发的异常 System.Web.Optimization找不到引用
在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...
- System.Web.Optimization 合并压缩技术的使用
捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...
- .net mvc System.Web.Optimization 、System.Data.Entity.Infrastructure找不到
在MVC4的开发中,如果在App_Start目录下BundleConfig.cs类没有找不到引用System.Web.Optimization,可以使用程序包管理控制台进行安装到使用的项目 打开 工具 ...
- System.Web.Optimization对脚本和样式表的压缩操作
1 是否允许样式表压缩 BundleTable.EnableOptimizations = true; 在MVC项目中的 BundleConfig操作中是微软已经给我们准备好的CSS和JS压缩,我们可 ...
- MVC 之 System.Web.Optimization找不到引用
在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...
- 使用System.Web.Optimization对CSS和JS文件合并压缩
在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...
随机推荐
- 那些年我们写过的T-SQL(下篇)
下篇的内容很多都会在工作中用到,尤其是可编程对象,那些年我们写过的存储过程,有木有?到目前为止很多大型传统企业仍然很依赖存储过程.这部分主要难理解的部分是事务和锁机制这块,本文会进行简单的阐述.虽然很 ...
- WPF中找不到Image或者Image不是Drawing系列
WPF中默认没有引用WinForm里面的一些东西,都是用它自带的那一套,但又不能完全脱离,所以有的时候比较蛋疼
- Web Workers 的基本信息
问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...
- 【Discuz】云平台服务:出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常
提示信息 出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常 版本X3.2.20160601 解决方案 Step1.修改云平台开通状态为未开通状态 Step2.访问 ...
- Android线程机制——AsyncTask
对于Android为什么要使用多线程,因为从Android4.0之后,谷歌规定了网络操作不允许放在主线程中执行,由此就有了多线程的机制,有个JAVA学习经验的朋友一定知道多线程指的是什么,简单来讲就是 ...
- Cocos2d-x 3.2 学习笔记(四)学习打包Android平台APK!
从cocos2dx 3.2项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后,以后就会非常快捷! (涉及到3.1.1版本的,请自动对应3.2版本,3.x版本的环境搭建都是一样的) ...
- Tools - Git与GitHub
Git Wiki - Git 开源的分布式版本控制系统,用于敏捷高效地管理项目版本. Git - HomePage Git - CHEAT SHEET git_cheat_sheet.pdf GitH ...
- Sql Server,如何去含有非数字的nvarchar,再转为为数值
菜鸟一枚,今天做项目时,突然遇到一个问题: 在数据库中中存放的nvarchar类型的“时间”,例如:‘08:00’,而我需要进行时间的范围比较,这时就想到了将nvarchar类型转化为int类型. 这 ...
- 探秘重编译(Recompilations)(2/2)
在上一篇文章里,我讨论了使用临时表如何引起SQL Server里的重编译.在文章最后我提到,今天这篇文章我会聚焦表变量(Table Variables)的更多信息,它可以避免重编译的昂贵开销.我们来详 ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...