zoukankan      html  css  js  c++  java
  • ASP.NET MVC 4使用Bundle的打包压缩JS/CSS

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白、批注及修改JavaScript内部函数、变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验。

    在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度。更为重要的是通过捆绑可以解决IE浏览器的31个CSS文件连接的限制。在做ASP.Net项目时很多时候会使用一些开源的javascript控件。无形中增加了css和javascript文件的引用。如果手工将这些css文件合并将给将来版本升级造成很大的麻烦。于是,我们只好小心翼翼的处理这些css文件在页面中的引用。ASP.NET捆绑是ASP.NET 4.5的新功能,是System.Web.Optimization命名空间下。他提供了一些ASP.NET运行性能方面的优化,比如,一个页面可能有很多CSS/JS/图片,通过灵活的应用BundleTable类,他可以帮你将文件合并压缩代码优化成一个最理想的文件,然后输出到客户端,从而提高了浏览器下载速度。

    首先在项目的App_Start文件夹中,会有一个BundleConfig.cs文件:

    image

    这里面写了所有需要Bundle的内容,可以自行设置:

    image

    其中的bundles.Add是在向网站的BundleTable中添加Bundle项,这里主要有ScriptBundle和StyleBundle,分别用来压缩脚本和样式表。用一个虚拟路径来初始化Bundle的实例,这个路径并不真实存在,然后在新Bundle的基础上Include项目中的文件进去。具体的Include语法可以查阅上面提供的官方简介。

    然后对Bundle的注册是在项目根下的Global.asax文件中,这个文件中的Application_Start是网站程序的开始,里面注册了网站各种初始化的内容,其中就包括对BundleTable的Bundle添加:

    image

    默认情况下,Bundle是会对js和css进行压缩打包的,不过有一个属性可以显式的说明是否需要打包压缩:

    BundleTable.EnableOptimizations = true;

    如果将其设为false,那么就会和下面说的debug=true时的情况相同了。

    在使用时,在相应位置调用ScriptRender和StyleRender的Render方法:

    image

    最终用户页面即可达到效果打包压缩效果。

    有一个地方主要注意,在Web.config中,当compilation编译的debug属性设为true时,表示项目处于调试模式,这时Bundle是不会将文件进行打包压缩的,页面中引用的js和css会分散原样的展示在html中,这样做是为了调试时查找问题方便(压缩以后就恶心了。。。)。

    image

    最终部署运行时,将debug设为false就可以看到js和css被打包和压缩了。

    =============

    使用Bundle的关键在于要向ASP.NET中的BundleTable注册Bundle。

    如果要在ASP.NET WebForm中使用Bundle,需要在新建项目时选择.NET Framework 4.5,最好使用模板网站新建,这样就可以直接看到Bundle了。

     
     
  • 相关阅读:
    springmvc与Ajax交互
    springmvc请求参数获取的几种方法
    struts2进阶篇(2)
    mysql explain用法
    struts2基础篇(1)
    struts2工作原理
    PHP 数组的拷贝是按值传递 or 按引用传递
    js中使用cookie
    Yii rules常用规则
    js倒计时发送验证码按钮
  • 原文地址:https://www.cnblogs.com/caoyc/p/5774184.html
Copyright © 2011-2022 走看看