转:ASP.NET MVC4细嚼慢咽---(5)js css文件合并

原文:http://blog.csdn.net/zx13525079024/article/details/19161777

MVC4增加了一些新功能,接下来,我们来研究下MVC4中的新增功能,我们在新建一个MVC4项目的时候,会发现在项目下多出了一个App_Start文件夹,文件夹下面有4个文件,BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,其中BundleConfig.cs文件就是我们这一节要讲的的文件。

           众所周知,浏览器在向服务器发送请求的时候,请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求,去除文件中的一些注释,空白,压缩文件的大小,自动合并压缩优化代码,缩短响应时间,提高网页速度,起到优化网站的作用。

         1.定义分组

           创建MVC4项目后,我们会在global.asax文件中的Application_Start()方法中看到如下代码,起到注册作用

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            BundleConfig.cs代码

            

[csharp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. public class BundleConfig  
  2.    {  
  3.        // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725  
  4.        public static void RegisterBundles(BundleCollection bundles)  
  5.        {  
  6.            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
  7.                        "~/Scripts/jquery-{version}.js"));  
  8.   
  9.            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(  
  10.                        "~/Scripts/jquery-ui-{version}.js"));  
  11.   
  12.            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(  
  13.                        "~/Scripts/jquery.unobtrusive*",  
  14.                        "~/Scripts/jquery.validate*"));  
  15.   
  16.            // 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好  
  17.            // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。  
  18.            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(  
  19.                        "~/Scripts/modernizr-*"));  
  20.   
  21.            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  
  22.   
  23.            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(  
  24.                        "~/Content/themes/base/jquery.ui.core.css",  
  25.                        "~/Content/themes/base/jquery.ui.resizable.css",  
  26.                        "~/Content/themes/base/jquery.ui.selectable.css",  
  27.                        "~/Content/themes/base/jquery.ui.accordion.css",  
  28.                        "~/Content/themes/base/jquery.ui.autocomplete.css",  
  29.                        "~/Content/themes/base/jquery.ui.button.css",  
  30.                        "~/Content/themes/base/jquery.ui.dialog.css",  
  31.                        "~/Content/themes/base/jquery.ui.slider.css",  
  32.                        "~/Content/themes/base/jquery.ui.tabs.css",  
  33.                        "~/Content/themes/base/jquery.ui.datepicker.css",  
  34.                        "~/Content/themes/base/jquery.ui.progressbar.css",  
  35.                        "~/Content/themes/base/jquery.ui.theme.css"));  
  36.        }  
  37.    }  


                  BundleCollection是一个集合,用于将绑定规则添加到集合中,使用Add方法.

                bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));

                new ScriptBundle("~/bundles/jquery")定义一个分组名称,Include表示这个分组下具体包括的文件。

                version参数代表版本号 ,*代表所有,这两个是可以理解为通配符。

                 以上代码表示创建一个~/bundles/jquery分组,该分组指向的文件为scripts文件夹下的jquery-1.7.1.js文件。

                如果scripts文件夹下有jquery-1.7.1.js,jquery-1.6.1.js,则会指向这两个文件。

                        

              同样,bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

              表示创建了一个~/Content/css分组,指向~/Content/site.css文件.

 

             2.使用分组
             分组已经定义好,我们接下演示怎样使用。

             如果在页面中使用scripts,可以使用@Scripts.Render("~/bundles/jquery")方法,参数为分组名称

             如果在页面中使用css,可以使用@Styles.Render("~/Content/css")方法,参数为分组名称.

             可以看下VIEWS文件夹下的Shard文件夹的_Layout.cshtml文件

            

[csharp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>@ViewBag.Title</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9. </head>  
  10. <body>  
  11.     @RenderBody()  
  12.   
  13.     @Scripts.Render("~/bundles/jquery")  
  14.     @RenderSection("scripts", required: false)  
  15. </body>  
  16. </html>  


     运行项目后,可以查看页面源代码,效果如下

         


        

           3.合并请求

             接下来我们通过分组将请求多个文件合并成请求一个,可以使用如下两种方法来实现

               1.将web.config中的编译调试debug设为false  <compilation debug="false" targetFramework="4.5"/>

               2.在BundleConfig中的方法末尾添加  BundleTable.EnableOptimizations = true;

               再次运行页面,可以看到生成如下代码

                  src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"

                  ?前面是分组名称,后面是多个文件合并后生成的哈希码

                   

            4.对比效果

              我们在火狐下用firebug查看合并前后的对比效果,可以对比下请求的文件大小,时间等方面的差别还是挺大的

                压缩合并前:

                  

             压缩合并后:

                

              注:默认情况下 BundleTable.Bundles会过滤掉后缀名为这些的文件,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,

                当加载后缀名为这些的文件,将显示空白。

                 可以用如下方法去除对这些文件过滤限制

 

               

[csharp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. BundleTable.Bundles.IgnoreList.Clear();   
  2.           BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);  
  3.           //BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);   
  4.           //BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);   


 

 

 

                demo:下载:http://download.csdn.net/detail/zx13525079024/6918637

转载于:https://www.cnblogs.com/ookami/p/3976518.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity3d学习笔记(一)-在一个GameObject上进行多个AudioSource的控制

using UnityEngine; using System.Collections;public class SoundSwitch : MonoBehaviour {public AudioSource as1;public AudioSource as2;public AudioClip[] a1;// Use this for initializationvoid Start () {//代码关键点1&#xff08;可选&#xff09;&#xff1a;增加…

[读码时间] 完美拖拽

说明&#xff1a;代码取自网络&#xff0c;注释为原文所有&#xff01; <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>完美拖拽</title><style type"text/css">html, body {overflow: hidden;}…

Oracle 随机取某一列的值

2019独角兽企业重金招聘Python工程师标准>>> select t.recd_idfrom (select recd_id, ROWNUM RN from RT_TICKETS_BIS_RECD) twhere t.RN (select round(DBMS_RANDOM.VALUE(1, count(1)))from RT_TICKETS_BIS_RECD); 1) select round(DBMS_RANDOM.VALUE(1, count(1…

C/C++注释规范

1. 源文件头部注释 列出&#xff1a;版权、作者、编写日期和描述。 示例&#xff1a; /************************************************* Copyright:East Author:Jason Date:2017-03-02 Description:描述主要实现的功能 **************************************************…

vue Method 事件

简介vue事件监听通过v-on指令配置在HTML中&#xff0c;相当于原生的addEventListener。所有的vue事件处理方法和表达式都严格绑定在当前视图的ViewModel上&#xff0c;采v-on指令有如下好处&#xff1a; 1&#xff09;通过查看HTML模板便能轻松定位对应的方法 2&#xff09;Vie…

类中匿名函数如何从 event 中去除

匿名函数在各种event中如鱼得水的到处使用。 可是 把attach 到 Event 中的这些匿名函数 detach 是一个恼人的问题。 不建议在类的内部做一个 List<fn> &#xff0c; 这样会迅速把类复杂化。 而且这种做法也失去匿名函数的便捷和闭包。 这里有一种方法 &#xff0c; 在 E…

ZooKeeper典型应用场

为什么80%的码农都做不了架构师&#xff1f;>>> 数据发布与订阅&#xff08;配置中心&#xff09; 发布与订阅模型&#xff0c;即所谓的配置中心&#xff0c;顾名思义就是发布者将数据发布到ZK节点上&#xff0c;供订阅者动态获取数据&#xff0c;实现配置信息的集…

vue 输入框获取焦点

1&#xff09;输入框给一个v-focus属性&#xff1a; <input ref"searchInput" v-focus>2&#xff09;自定义获得焦点指令&#xff1a; directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},3&#xff09;点击事件触发聚焦 this.$nex…

Mysql jdbc driver源码浅析(一)

jdbc操作实例代码 //1. 加载驱动Class.forName("com.mysql.jdbc.Driver");//2. 获取连接Connection connection DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/dbName", "userName", "password");Statement stmt conne…

kernel32.dll出错解决方案

kernel32.dll 一、什么是kernel32内核文件 kernel32.dll是Windows 9x/Me中非常重要的32位动态链接库文件&#xff0c;属于内核级文件。它控制着系统的内存管理、数据的输入输出操作和中断处理&#xff0c;当Windows启动时&#xff0c;kernel32.dll就驻留在内存中特定的写保护…

vue 按A-Z字母排序数据

<template><!-- 选择游戏 --><div class"game" :class"{game__spacing: selectedGame.length > 0}"><!-- 搜索 --><div click"searchGame" class"game__search"><div class"game__search-bo…

用rem来做响应式开发

电脑版的商城昨晚做完了&#xff0c;今天赶着做手机端的&#xff0c;提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度&#xff0c;保证在不同手机上都能正常显示给用户&#xff0c;我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽…

c 连接mysql

apt-get install libmysqlclient-dev mysql 使用的是xampp 需要指定sock 源码&#xff1a;main.c #if defined(_WIN32) || defined(_WIN64) //为了支持windows平台上的编译 #include <windows.h> #endif #include <stdio.h> #include <stdlib.h> #include &…

Java 编程下 Eclipse 如何设置单行代码显示的最大宽度

Eclipse 下一行代码的默认宽度是 80 &#xff0c; 稍长一点的一行代码就会自动换行&#xff0c;代码可读性较差&#xff0c;我们可以自己在 Eclipse 对代码宽度进行设置。 设置路径为&#xff1a;【Window】→【Preferences】→【Java】→【Code Style】→【Formatter】&#x…

前端公共reset.css模板

简介学习地址&#xff1a; https://meyerweb.com/eric/tools/css/reset/重置样式表的目的是减少浏览器在默认行高&#xff0c;标题的边距和字体大小等方面的不一致。重置样式特意是非常通用的/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (publ…

基于VMWare配置VxWorks开发环境

常规VxWorks的开发环境都是基于目标开发板或目标机来构建的&#xff0c;但并非所有人都具备这样的条件&#xff0c;所以本文主要介绍如何基于vmware来构建VxWorks开发环境。Step 1. 安装vmware 首先需要安装vmware, 版本没有什么限制&#xff0c;我装的是vmware 8.0&#xff0c…

plan

工作&#xff1a; plan A 确定用什么环境和工具进行开发&#xff0c;并让老杨了解。 如何支持骨骼动画模型&#xff0c;这是最关键部分。 交互和用户体验方面进行完善。 plan B 太极拳网站 前台&#xff1a;silverlight4.0 后台&#xff1a;java 数据库&#xff1a;mysql 生活…

keepalived实现高可用nginx反向代理的简单案例

写在前面&#xff1a;如果此文有幸被某位朋友看见并发现有错的地方&#xff0c;希望批评指正。如有不明白的地方&#xff0c;愿可一起探讨。案例拓扑图安装keepalived和nginx安装keepalived# yum -y install keepalived创建nginx用户组及nginx用户# groupadd -r nginx # userad…

Vue 父子组件双向绑定传值

最简单的双向绑定&#xff08;单文件中&#xff09;就是表单元素的v-model了&#xff0c;如果同时设置v-model和value&#xff0c;value属性无效。 自定义v-model&#xff1a;&#xff08;不推荐&#xff09; child: <template><h1>{{ msg }}</h1> </te…

java逻辑运算符

// | 或 & 与 int x3; System.out.println(x>2&x<5); // ||短路或 &&短路与 区别短路逻辑表达式判断第一个表达式&#xff0c;如果出结果直接返回true/false &#xff0c;而非短路直到逻辑运算式全部运行完毕才返回&#xff1b; System.out.println…