ASP.NET MVC中的捆绑和压缩技术
概述
在众多Web性能优化的建议中有两条:
- 减少Http请求数量:大多数的浏览器同时处理向网站处理6个请求(参见下图),多余的请求会被浏览器要求排队等待,如果我们减少这些请求数,其他的请求等待的时间将会缩短。
- 压缩Javascript和Css:移除不必要的注释,空白字符,和换行,替换参数函数名等。文件资源小了加载速度自然快,时间也就短了。
APS.NET MVC
使用捆绑和压缩技术实现,在 System.Web.Optimization
类中提供的,Bundling
为捆绑,Minification
为压缩。
各浏览器支持的请求数量:
Bundling&Minification
- 捆绑(Bundling):是按逻辑分组的物理文件,最终把多个文件合并到一个文件,浏览器端只提交一个HTTP请求。可应用于
CSS
和Javascript
文件 - 压缩(Minification):移除js和css文件中不必要的空白,换行,tab,注释来减小文件的大小
注意:捆绑不能同时包含CSS和JS,要单独做捆绑
MVC中的实现
APS.NET MVC 默认的的捆绑配置:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-test.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/customize/rico-bundle.css"
));
BundleTable.EnableOptimizations = true;
}
}
1.Include创建捆绑包
Include
方法采用字符串数组,其中每个字符串是资源的虚拟路径
2.Render 引用捆绑包
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
3.通配符
4.启动Bundle
开启捆绑的默认有两种,任意其中一种都可以:
- 将BundleTable.EnableOptimizations设置为True
- 设置当前编译模式为Release
注意:捆绑和压缩技术是不能再DEBUG模式下起作用的
5. 类名和方法
- BundleConfig类:是用来创建Script Bundle和Style Bundle的
- Script Bundle 和 Style Bundle:创建js和css文件的绑定,构造函数都有一个virtualPath参数是一个虚拟的文件名
例如:/Content/css
就是虚拟文件名
6.debug模式下效果
文件并没有压缩,按照正常css和js文件引用:
请求数量:10个,总大小:218KB
7.release模式下效果
css文件被压缩成Content
路径下的css?v=7F0ORttUJZmKvyJEvA9CoG96vO15y4Ox1LUgKhl-C681
文件
js文件中jQuery
被压缩在bundles
路径下的bundles/jquery?v=2u0aRenDpYxArEyILB59ETSCA2cfQkSMlxb6jbMBqf81
文件
每个捆绑都是按照预定好的虚拟路径进行压缩和生成的。
查询参数V:每个捆绑文件都会带一个查询参数V
这是当前捆绑包的令牌,是缓存的唯一标识。当原始文件没有变动时,会使用缓存中的合并文件,缓存为1年;如果文件变动则令牌值会重新生成,浏览器会获取最新的包。
请求数量:8个,总大小:130KB
性能
下表显示了单独列出所有资产并在示例程序中使用绑定和缩减 (B/M) 的几个重要区别:
类型 | 使用 B/M | 而无需 B/M | 更改 |
---|---|---|---|
文件请求 | 9 | 34 | 256% |
发送的 KB | 3.26 | 11.92 | 266% |
接收到的 KB | 388.51 | 530 | 36% |
加载时间 | 510 MS | 780 MS | 53% |
注意
缓存
合并压缩后的文件默认缓存一年。如果你重复打开网页,并且配置的文件也没有做修改的情况下,服务器会返回一个 HTTP 304 的状态码,这样浏览器会加载缓存中的文件
路由冲突
不要将bundle name和物理文件路径名字弄成一样的,不然CSS会加载不了的(踩过坑的)
名字一样效果就是这样:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/css/rico-bundle.css"
));
第一次请求被301
永久重定向(不知道为啥?),第二次请求返回403
因为访问的物理路径,所以是禁止访问的。
路径问题
将多个CSS合并在一起后,有的时候会导致图片加载失败的情况
例如:
.bundle {
width: 200px;
height: 80px;
}
.bluecloud1 {
background: url(../image/bluecloud.jpg) no-repeat;
}
.bluecloud2 {
background: url(/Content/image/bluecloud.jpg) no-repeat;
}
在样式bluecloud1
中使用相对路径,捆绑包后效果如下:
会发现合并css
图片的路径被解析为http://rico.mvcdemo.com/image/bluecloud.jpg
自然是404 Not Found
,bluecloud2
就是OK的。
解决办法:图片是用绝对路径。
js和min.js
相同目录中存在 *.min.js
和 *.js
,当你修改了*.js
文件后,希望合并压缩后的 JS 文件也包含修改后的内容,然而并非我们所希望的那样,压缩后的 JS 文件还是引用了a.min.js 中的内容,之前修改的并没有出现在压缩的 JS 文件中。同理,CSS也是如此。
参考
- 【官方文档】Bundling and Minification
- ASP.NET MVC中用 BundleCollection 压缩CSS时图片路径问题
- ASP.NET MVC Bundle使用 合并压缩
- MVC学习系列14--Bundling And Minification【捆绑和压缩】--翻译国外大牛的文章
ASP.NET MVC中的捆绑和压缩技术的更多相关文章
- ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- 2.ASP.NET MVC 中使用Crystal Report水晶报表
上一篇,介绍了怎么导出Excel文件,这篇文章介绍在ASP.NET MVC中使用水晶报表. 项目源码下载:https://github.com/caofangsheng93/CrystalReport ...
- 关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
- 在Asp.Net MVC 中配置 Serilog
Serilog 是一种非常简便记录log 的处理方式,使用Serilog可以生成本地的text文件, 也可以通过 Seq 来在Web界面中查看具体的log内容. 接下来就简单的介绍一下在Asp.Net ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- asp.net mvc 中 一种简单的 URL 重写
asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
随机推荐
- 专人写接口+模型,专人写业务逻辑---interface_model -- business logical
专人写接口+模型,专人写业务逻辑---interface_model -- business logical 0-控制台脚本重构为“面向接口编程”:1-仓库类通过__constru方法,来实现一处实例 ...
- ubuntu 配置pptp
PPTP是点对点隧道协议,用于在公网上建立两个节点之间的专用用网络.普通的用户一般是通过拨号的方式,接入ISP提供的网络,由于国内的上网环境,是访问不了google的,所以必须首先要有一台可以上goo ...
- Mac获取Jenkins管理员初始密码
前言 最近在配置jenkins环境,但是启动jenkins后,进入jenkins解锁页时,需要自己获取初始密码. 尝试在访达中输入地址搜索,结果无该文件.后来百度上查看多篇文章后,终于获取到了初始密码 ...
- 最长连续公共子序列(LCS)与最长递增公共子序列(LIS)
最长公共子序列(不连续) 实际问题中也有比较多的应用,比如,论文查重这种,就是很实际的一个使用方面. 这个应该是最常见的一种了,不再赘述,直接按照转移方程来进行: 按最普通的方式就是,直接构造二维矩阵 ...
- 20190820 On Java8 第十章 接口
第十章 接口 接口和抽象类提供了一种将接口与实现分离的更加结构化的方法. 抽象类和方法 包含抽象方法的类叫做抽象类.如果一个类包含一个或多个抽象方法,那么类本身也必须限定为抽象的,否则,编译器会报错. ...
- jmeter处理接口加密和解密
https://www.liangzl.com/get-article-detail-39672.html https://www.cnblogs.com/artoftest/p/7277996.ht ...
- 简单写入excel
import pymysql,xlwt def to_excel(table_name): host, user, passwd, db = '127.0.0.1', 'root', '123', ' ...
- 连接tomcat时,输入telnet localhost 8080后无法再次输入
初次接触服务器时,一般会在本地建立一个微型服务器,今天在使用Apache的tomcat时,为了在命令行下访问服务器中webapps下的自定义资源:首先打开命令行窗口,然后输入telnet localh ...
- Python_pickle
pickle是一个可以将任意一个对象存储在硬盘文件中的工具. 更新:Python3中用法变了: https://www.cnblogs.com/fmgao-technology/p/9078918. ...
- js本地时间格式化
var myDate = new Date(); //获取当前时间及日期 var year=myDate.getYear(); // 获取当前年份(当前年份-1900) var fyear=myDat ...