• 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

  • 相关阅读:
    java控制台程序打包为jar
    idea 配置自定义模板
    git clone 使用用户名和密码
    (办公)轻松学redux
    (办公)轻松学 React-Router 4(20210401)
    (办公)探秘react教程20210331
    (办公)html5与css3的相关知识
    删除临时表空间
    windows如何拉取一个文件夹下的所有文件名
    数据文件resize回收空间
  • 原文地址:https://www.cnblogs.com/hahqb/p/2613403.html
Copyright © 2020-2023  润新知