一. 简介

1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是MVC中特有的一种优化方式。

(当然现在前端也有很多基于node的工作流插件,可以合并压缩混淆js或css)

2. 原理(了解即可):核心方法ApplyTransforms,通过StreamReader不断一次一次进行读取

参考文档:https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

二. 如何使用

①:首先要在Global中进行注册,代码:BundleConfig.RegisterBundles(BundleTable.Bundles); 【系统默认已经注册,此步骤不需要我们操作】

②:在BundleConfig类中进行自定义合并压缩js或css

   a. 压缩css方法:bundles.Add(new StyleBundle("~/XXX").Include("","",""));

    StyleBundle中的参数为一个虚拟路径,单必须以【~/】开头,后面自定义,该名称即为在前端页面引入的名称。

    Include中的参数为一个可变的string数组,用来声明要压缩合并的css文件的路径。

   b. 压缩js方法:bundles.Add(new ScriptBundle("~/XXX").Include("","",""));

    ScriptBundle中的参数为一个虚拟路径,单必须以【~/】开头,后面自定义,该名称即为在前端页面引入的名称

    Include中的参数为一个可变的string数组,用来声明要压缩合并的css文件的路径。

③:在前端页面通过Render方法或者原生方法引入合并后的js或css的虚拟目录

④:将webconfig中的调试模式设置为false,这样在不发布的情况下就可以看到压缩后的效果。

    <compilation debug="false" targetFramework="4.5" />

  如果设置为true,直接在vs中运行,是看不到压缩效果的,仍然是多个js或css文件 (适用于通过Render方式的引入)

⑤:该步骤和④的效果相同.

  如果不设置④的情况下,还想在vs中运行看到压缩效果,也可以在BundleConfig中加一句话:

  BundleTable.EnableOptimizations = true; (特别注意:这里是true,而配置文件的方式是设置为false)

  (适用于通过Render方式的引入)

补充:通过表达式扩展:(详细语法可以参考上面的地址,下面扩展几个常用的)

①: T* 该目录下以T开头的js或css文件

②: *.js *.css 该目录下的所有js或css文件

③: T*.js T*.css 这个是不合法,违规的

三. 代码测试

1. 新建两个js文件和css文件

2. 在BundleConfig文件中进行注册

3. 编写前端页面,以传统的方式引入,并查看效果。

4. 引入压缩合并后的路径。

方式一的运行结果:

方式二的运行结果:发现并没有压缩

 至于为什么,上面已经解释了。 

解决方案:

  方案①:BundleTable.EnableOptimizations = true;

  方案②:<compilation debug="false" targetFramework="4.5" />

 重新运行:

最后补充几个含格式验证的压缩:

第十一节:Bundles压缩合并js和css及原理分析的更多相关文章

  1. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  2. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  3. Web性能优化-合并js与css,减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  4. 老李推荐:第6章8节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-小结

    老李推荐:第6章8节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-小结   本章我们重点围绕处理网络过来的命令的MonkeySourceNetwork这个事 ...

  5. 老李推荐:第6章7节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-注入按键事件实例

    老李推荐:第6章7节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-注入按键事件实例   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜 ...

  6. 老李推荐:第6章6节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令队列

    老李推荐:第6章6节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令队列   事件源在获得字串命令并把它翻译成对应的MonkeyEvent事件后,会把这些 ...

  7. 老李推荐:第6章4节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-翻译命令字串

    老李推荐:第6章4节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-翻译命令字串   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自 ...

  8. 老李推荐:第6章5节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-事件

    老李推荐:第6章5节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-事件   从网络过来的命令字串需要解析翻译出来,有些命令会在翻译好后直接执行然后返回,但有 ...

  9. 老李推荐:第6章3节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令翻译类

    老李推荐:第6章3节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令翻译类   每个来自网络的字串命令都需要进行解析执行,只是有些是在解析的过程中直接执行 ...

随机推荐

  1. 3星|《HBO的内容战略》:HBO与美国电视业大事记

    HBO的内容战略 基本是HBO与美国电视业的大事记.从电视的诞生讲起.HBO在1972年首播,1975年做出一个当时惊世骇俗的决定:勇卫星实时向全美发送信号,随即成为覆盖全国的电视台:80年代受到录像 ...

  2. 比较两个slice、struct或者map是否相等

    我们可以直接使用reflect.DeepEqual来比较两个slice.struct或者map是否相等 package main import ( "fmt" "refl ...

  3. 2017 百度杯丶春秋欢乐赛 writeup

    1. 内涵图(Misc) 题目: 我不是一个简单的图片 我是一个有内涵的图片 解:保存到桌面,右键属性->详细信息,即可获得flag. 2. 小电影(Misc) 题目: 我说过 这次比赛是让大家 ...

  4. kaptcha验证码的使用

    使用kaptcha可以方便的配置: 验证码的字体 验证码字体的大小 验证码字体的字体颜色 验证码内容的范围(数字,字母,中文汉字!) 验证码图片的大小,边框,边框粗细,边框颜色 验证码的干扰线(可以自 ...

  5. git冲突解决办法合集

    一 换行符CRLF错误解决办法 1 错误产生原因 不同的操作系统使用的换行符是不一样的. unix/linux使用的是LF,max后期也采用了LF,但在windows一直采用的CRLF(回车)换行符. ...

  6. 返回数组中指定的一列,将键值作为元素键名array_column

    array_column() 函数 从记录集中取出 last_name 列: <?php // 表示由数据库返回的可能记录集的数组 $a = array( array( 'id' => 5 ...

  7. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...

  8. 服务端监控工具:Nmon使用方法

    在性能测试过程中,对服务端的各项资源使用情况进行监控是很重要的一环.这篇博客,介绍下服务端监控工具:nmon的使用方法... 一.认识nmon 1.简介 nmon是一种在AIX与各种Linux操作系统 ...

  9. Linux内存管理 (17)KSM

    专题:Linux内存管理专题 关键词:KSM.匿名页面.COW.madvise .MERGEABLE.UNMERGEABLE. KSM是Kernel Samepage Merging的意思,用于合并内 ...

  10. typeScript函数篇

    typeScript的函数是在es6的函数特性的基础上加了一些后端的概念:泛型.参数类型声明.返回值类型声明.重载.装饰器等.其他的一些特性:箭头函数.生成器.async-await.promise等 ...