Bundling and Minification是asp.net mvc4中一项可以减少用户请求等待时间,提升用户体验的一项技术。在VS2010中新建MVC4项目是,如果选择"基本"项目,项目模板就会默认使用该项技术。但如果是选择“空”项目,或者想为自己原来的项目添加这项技术,该如何做呢。主要要以下几步:

  • 在项目中选择引入System.Web.Optimization。

  • 在Global.asax加入BundleConfig.RegisterBundles(BundleTable.Bundles)

  • 在两个web.config中加入<add namespace="System.Web.Optimization" />(不加系统会提示CSHTML页中的SCRIPT等不存在)

  • 在app_start下建立BundleConfig.cs,建立绑定。内容如下:

  •         // For more information on Bundling, visit 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*")); bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
    "~/Scripts/knockout-{version}.js")); // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
    "~/Scripts/modernizr-*")); //所有的js
    bundles.Add(new ScriptBundle("~/bundles/js_all").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/jquery-ui-{version}.js",
    "~/Scripts/jquery.unobtrusive*",
    "~/Scripts/jquery.validate*",
    "~/Scripts/knockout-{version}.js",
    "~/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.*")); //所有的css
    bundles.Add(new StyleBundle("~/Content/css_all").Include(
    "~/Content/site.css",
    "~/Content/themes/base/jquery.ui.*"));
    }

    再在母版页中加入:

  •     @Styles.Render("~/Content/css_all")
    @Scripts.Render("~/bundles/js_all")

    大功告成,这里还有一步很关键的,就是把WebConfig中的Debug设置改为false,然后<Ctrl>+<F5>看网站,非常棒,对吧……

    也许你要说我有些地方其实不需要那么多的js或者css呢,它都帮我捆了起来岂不是会降低效率?——基本上不会,因为浏览器都有缓存的功能,除非你按F5刷新页面,(如果是苹果系统的话我记得是<Command>+<R>),浏览器才会尝试从服务器上重新下载js和css,就算重新下载,经过捆绑和压缩的js和css也没多大,效率还行的。如果你实在不想捆那么多js或者css的,那就把bundling设置得细一些,但这样的话就可能导致更多次的请求,从而效率有所下降,总之就是要自己好好权衡了。

MVC4的bundling功能简介的更多相关文章

  1. DYN-B201 Dynamics CRM 云生产力解决方案与功能简介

    DYN-B201 Dynamics CRM 云生产力解决方案与功能简介 讲师:王健.林松涛Dynamics CRM 云产品正式落地中国,CRM 与 Azure.O365 深度整合无缝集成,带来无与伦比 ...

  2. (视频) 《快速创建网站》 2.3 WordPress初始化和功能简介

    本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  3. SharePoint 2013 "通知我"功能简介

    功能简介 "通知我"主要是在列表或者文档库里面的项目,有添加/删除/修改等操作,发送邮件通知设置的用户的功能:可以针对列表或者文档库设置通知,也可以针对单一项目设置通知功能,是Sh ...

  4. Beginning SDL 2.0(1) SDL功能简介

    原文链接为 http://wiki.libsdl.org/Introduction. 由于近期整理音视频可视化的技术,发现好久不更新的SDL发布了2.0版本,以前也没有过于关注,这里准备尝试下.了解S ...

  5. HelloX操作系统网络功能简介及使用和开发指南

    HelloX网络功能简介及使用和开发指南 HelloX网络功能简介 作为物联网操作系统,网络功能是必备的核心功能之一.按照规划,HelloX实现了两个不同类型的TCP/IP协议栈,一个面向资源受限的嵌 ...

  6. 部分GDAL工具功能简介

    主要转自http://blog.csdn.net/liminlu0314?viewmode=contents 部分GDAL工具功能简介 gdalinfo.exe 显示GDAL支持的各种栅格文件的信息. ...

  7. 全国天气预报信息数据 API 功能简介与代码调用实战视频

    此文章对开放数据接口 API 之「全国天气预报信息数据 API」进行了功能介绍.使用场景介绍以及调用方法的说明,供用户在使用数据接口时参考之用,并对实战开发进行了视频演示. 1. 产品功能 接口开放了 ...

  8. Hadoop生态圈-Ambari控制台功能简介

    Hadoop生态圈-Ambari控制台功能简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在经历一系列安装过程之后(部署过HDP后我终于发现为什么大家喜欢用它了,部署比CDH简 ...

  9. Redis安装和主要功能简介

    Redis安装和主要功能简介   Redis(https://redis.io/), 是一个内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 安装Redis 我很少在开发机中直接装各种数 ...

随机推荐

  1. 【疯狂Java学习笔记】【第一章:Java语言概述】

    [学习笔记]1.Java与C#的异同:Java与C#的相同之处有很多,它们均摒弃了C++面向对象的多继承.宏定义.全局变量.全局函数.指针等等难以使用的机制,添加进了成熟的机制,如垃圾回收.接口等等. ...

  2. 基于ASP.NET的comet简单实现

    http://www.cnblogs.com/hanxianlong/archive/2010/04/27/1722018.html 我潜水很多年,今天忽然出现.很久没写过博客了,不是因为不想写,而是 ...

  3. Mac与Linux的一个巨大不同

    就是Mac仍处在桌面市场的商业圈里,尽管它的市场很小,但是正版率却很高,而且还有专门的Mac Store提供付费下载. Linux在桌面市场几乎没有份额,也不会有人会去买它的应用软件,基本上只存在于服 ...

  4. 落叶枫桥LOGO

    LOGO

  5. inflate方法与findViewById的区别

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate()来找 re ...

  6. Android:控件ListView列表项与适配器结合使用

    Listview是用来展示一些重复性的数据用的,比如一些列表集合数据展示到手机,需要适配器作为载体获取数据,最后将数据填充到布局. ListView里面的每个子项Item可以使一个字符串,也可以是一个 ...

  7. jquery ui autoComplete自动完成

    官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "Ap ...

  8. 新版本的tlplayer for android ,TigerLeapMC for windows发布了

    tlplayer for android 新版本修正了图像倾斜等等问题,增加了动态水印功能. 支持hls(m3u8),http,rtsp,mms,rtmp等网络协议. 声明tlplayer 上的变速不 ...

  9. git bash中带空格的文件夹以及文件的处理

    空格用'\ '表示,输入的时候,是不需要单引号的 total 338drwxr-xr-x 9 Administ Administ 4096 Aug 24 23:53 HDTHelperdrwxr-xr ...

  10. Zookeeper基本知识

    Zookeeper的Session: (1)客户端和server间采用长连接 (2)连接建立后,server产生session ID(64位)返还给客户端 (3)客户端定期发送ping包来检查和保持和 ...