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 ...
随机推荐
-
MUI跨域请求数据的例子:
<, , success: function(data) { ...
-
三线程连续打印ABC
package test5; import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Reentr ...
-
Java集合框架:HashMap
转载: Java集合框架:HashMap Java集合框架概述 Java集合框架无论是在工作.学习.面试中都会经常涉及到,相信各位也并不陌生,其强大也不用多说,博主最近翻阅java集合框架的源码以 ...
-
【转】nginx的优缺点
原博文出自于:http://blog.csdn.net/a454211787/article/details/22494485 感谢! 1.nginx相对于apache优点: 轻量级同样起we ...
-
Linux是什么
计算机主要以二进制为单位,而目前常用的磁盘容量单位为B,其单位换算为1B=8bit,其他的以1024为其倍数,如1GB=1024MB等. 操作系统(Operation System)主要用于管理与驱动 ...
-
PHP获取远程文件的几种方式
1.fopen() 2.file_get_contents() 3.fsocket() 4.curl()
-
C#处理json实战
昨天看到技术群中发了一个查询天气的api,http://www.sojson.com/open/api/weather/json.shtml?city=南昌 点进去看,发现服务器传回来一个天气信息的j ...
-
[UE4]让箭头保持水平的第二种方法:Combinrotators、Delta(Rotator)
一.手柄在世界坐标系中有一个绝对朝向,我们可以知道箭头相对于手柄的朝向,相对于手柄的旋转角度. 可以通过手柄绝对朝向.箭头的相对于手柄的朝向计算得到箭头的绝对朝向. 在得到箭头的相对于手柄的角度,在这 ...
-
Linux服务器---流量监控MRTG
MRTG MRTG可以分析网络流量,但是它必须依赖SNMP协议.将收集到的数据生成HTML文件,以图片的形式展示出来 1.安装一些依赖软件 [root@localhost bandwidthd-2.0 ...
-
Gym 100247I	Meteor Flow(优先队列)
https://vjudge.net/problem/Gym-100247I 题意:有一艘飞船,现在有n颗流星坠落会攻击到飞船,每颗流星会在t时刻降落,对飞船造成d的伤害,飞船会有一个保护盾,初始值为 ...