MVC4的新增功能之前端优化

        做asp.net平台开发都能感觉到，微软更新速度很快。对于这点是好是坏各人的评价不尽相同。有的认为更新快是才能及时用上最新技术，有的又觉得更新快是由于不能一次性做得最好。本文简单讲一下mvc4中关于前端的一个新功能——js与css的压缩与合并。
在这之前，也有很多第三方工具可以来做这件事，MVC4中把该功能也集成上去了，可谓微软真的很贴心。
        mvc4中的这个功能是在System.Web.Optimization命名空间中。在MVC4的测试版跟RC版里也有所不同，这里只说RC版的。我们创建一个MVC4（RC）项目后，项目中会比以往的项目多了个App_Start目录，里面存放3个类，BundleConfig.cs、FilterConfig.cs、RouteConfig.cs。BundleConfig.cs就是用来配置这些css、js的。这里不详细介绍，只简单提一提用法。取两段简单的代码看一下：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
这两个就是配置js路径跟css路径，当然路径可以有多个，Include传递的参数为数组。可以把要添加的js跟css都放上去。在View中引用方式是：
    @System.Web.Optimization.Styles.Render("~/Content/css")
    @System.Web.Optimization.Scripts.Render("~/bundles/jquery")
用法也比较简单。（MVC4测试版中稍微麻烦些，需要在Global.asax中注册。）
        好了，到这里就简单提一下MVC4的这一新增功能。然而本文主要不是要夸它一番，而是要稍微批它一下。下面说说这个功能一个不足的地方。
        我们在css中难免会用到很多背景图片之类的，假设我们有这杨一个样式表：
        /Content/themes/default/typography.css
里面定义了一个样式：  
        h1.logo{background:url(images/logo.png) top left no-repeat;} 我们引用了一张背景图片。
背景图片路径为：/Content/themes/default/images/logo.png。
同样我们将这个样式表也添加到配置中，这样写：
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"," /Content/themes/default/typography.css"));
在_layout.cshtml（或者view中也行）引用  @System.Web.Optimization.Styles.Render("~/Content/css")，当我们在web.config中启用调试模式时（<compilation debug="true" targetFramework="4.0"/>），此时打开页面，查看网页源文件，我们发现css代码并没有被压缩，页面中显示的是引用了两个css文件，此时图片也正常显示，没 任何问题。但是当我们不启用调试模式（<compilation debug="false" targetFramework="4.0"/>）时，css跟js代码会被压缩，不管我们里面添加了几个css，最终会被压缩成一个，出现类似这样的引用：
 <link href="/Content/css?v=jsX9ARrAsXtFSm5-ZAd0mrgR0YlAerOxMoONulX4Kd01" rel="stylesheet" type="text/css" /> 。打开这个路径看css源码，发现css样式已经被压缩了。这也就是我们想要得到的效果。但是此时图片并无法找到。
为何会这样？其实我们查看压缩后的css代码就可以知道了，因为压缩后css里面引用的图片路径并不会改变，依然是url(images/logo.png)，那么此时css所表示的图片路径应该是在/Content/images/logo.png。而我们图片真正的路径是在：/Content/themes/default/images/logo.png。也难怪它找不到。如果压缩后样式是这样写的：h1.logo{background:url(themes/default/images/logo.png) top left no-repeat;} 就不会有问题了。可惜微软没做到，或者说暂时没做到。
    如果我们使用第三方组件，比如Combres来进行压缩，完全不会有这种问题，因为它压缩时可以重写路径。对于MVC4自带压缩功能的这个问题，我目前也只能为同一个目录下的样式表写成一组，这样当样式表在多个目录时页面中就要有多个<link href="cssurl" rel="stylesheet" type="text/css" />这样的代码了。这样页面载入时就要多做几次请求，但至少比不进行压缩好一些就是了。整体来说对于MVC4的几个新功能，个人觉得还是挺给力的。关于MVC4的新功能，各位可以看看微软的官方介绍（带视频）：
http://weblogs.asp.net/jgalloway/archive/2012/02/16/asp-net-4-beta-released.aspx

本文来自风情波涌的博客 http://www.cnblogs.com/hahqb