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 )的更多相关文章

  1. asp.net mvc4 System.Web.Optimization找不到引用

    在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...

  2. System.web.optimization 在 Asp.Net WebForm 中应用得注意了

    我们也可以在Asp.Net WebForm项目中去使用Optimization,去处理我们的资源文件,从而起到优化网站性能的效果,前端知识得从小事做起.但是在使用过程中我却发现了下面的问题. 第一步: ...

  3. 在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 ...

  4. MVC4删除 pages引发的异常 System.Web.Optimization找不到引用

    在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...

  5. System.Web.Optimization 合并压缩技术的使用

    捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...

  6. .net mvc System.Web.Optimization 、System.Data.Entity.Infrastructure找不到

    在MVC4的开发中,如果在App_Start目录下BundleConfig.cs类没有找不到引用System.Web.Optimization,可以使用程序包管理控制台进行安装到使用的项目 打开 工具 ...

  7. System.Web.Optimization对脚本和样式表的压缩操作

    1 是否允许样式表压缩 BundleTable.EnableOptimizations = true; 在MVC项目中的 BundleConfig操作中是微软已经给我们准备好的CSS和JS压缩,我们可 ...

  8. MVC 之 System.Web.Optimization找不到引用

    在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...

  9. 使用System.Web.Optimization对CSS和JS文件合并压缩

    在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...

随机推荐

  1. IOS开发之控件篇UINavigationController第一章 - 介绍

    UINavigationController是一个比较常见的控件,它连接个视图,例如一个视图走到另外一个视图,之间的联系都可以用这个NavigationController的方法 一般都会由两个部分组 ...

  2. iOS开发中 workspace 与 static lib 工程的联合使用

    在iOS开发中,其实workspace的使用没有完全发挥出来,最近做了一些研究,也想把之前写过的代码整理下,因为iOS里面的布局方式,交互方式也就那么几种.所以,整理好了之后,更能快捷开发,而且能够形 ...

  3. Object.create

    var emptyObject = Object.create(null); var emptyObject = Object.create(null); var emptyObject = {}; ...

  4. Vertex and Fragment Shader

    Semantics语义词: 定义:GPU工作时,数据通常暂存在寄存器,那么在Cg中,语义词就指定了输入/输出数据和图形硬件寄存器之间的映射关系. 原理:根据输入语义,图形处理器从某个寄存器取数据:然后 ...

  5. CentOS6.5使用createrepo搭建本地源

    本地搭建本地yum源采用的rpm全部来自CentOS-6.5-bin-DVD1&DVD2; 我的是在虚拟机环境安装,先检查我的操作系统版本: 1 2 3 4 [adam@ultraera ~] ...

  6. Abp公共连接和事务管理方法

    Conection 和事务管理在使用数据库的应用中是一个最重要的概念.当你打开一个连接,开始一个事务,如何来处理这些连接等等. 您也许知道,.NET使用了连接池.所以,创建一个连接实际上是从连接池里得 ...

  7. Redis在win7上的可视化应用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  8. 探秘Tomcat(一)——Myeclipse中导入Tomcat源码

    前言:有的时候自己不知道自己是井底之蛙,这并没有什么可怕的,因为你只要蜷缩在方寸之间的井里,无数次的生活轨迹无非最终归结还是一个圆形:但是可怕的是有一天你不得不从井里跳出来生活,需要重新审视井以外的生 ...

  9. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  10. Java多线程读取大文件

    前言 今天是五一假期第一天,按理应该是快乐玩耍的日子,但是作为一个北漂到京师的开发人员,实在难想出去那玩耍.好玩的地方比较远,近处又感觉没意思.于是乎,闲着写篇文章,总结下昨天写的程序吧. 昨天下午朋 ...