zoukankan      html  css  js  c++  java
  • 如何在ASP.NET MVC中,使用Bundle来打包压缩js和css

    最近自己建立一个自己的购物网站,准备启用Bundle来打包压缩js和css优化,遇到一点点小问题,这里仅简单记录下如何使用。

    首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,Bundle应该已经自动配置上了,因为本身会有jQuery和jQuery UI的引用,这两项引用会用到Bundle。

    就简单说一下要点吧。

    首先在项目的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了。

    VS开发环境:VS工具栏上有个Debug,Release,我自己在测试时,以为可以使用Release模式,然后选择测试【开始执行-不调试】但是没有作用,一样不会生成,必须将Web.config的compilation的debug设定为false(即代表了:BundleTable.EnableOptimizations=true,这段代码也可以在代码里写,代码里写就会覆盖web.config了),才会起作用!

    发布正式环境:Web.config的compilation的debug设定为false(当然如果你在代码上有控制BundleTable.EnableOptimizations值,那么web.config会被覆盖,那就无所谓了

  • 相关阅读:
    python3+selenium框架设计04-封装测试基类
    python3+selenium框架设计02-自动化测试框架需要什么
    python3+selenium框架设计01-Page Object
    python3+selenium入门16-窗口截图
    python3+selenium入门15-执行JavaScript
    爬虫入门
    NLP整体流程的代码
    NLTK与NLP原理及基础
    NLTK词性标注解释
    [hdu4355]Party All the Time(三分)
  • 原文地址:https://www.cnblogs.com/chenyuxi/p/9288320.html
Copyright © 2011-2022 走看看