CSS and JavaScript Bundling and Minification in ASP.NET 4.5
ASP.NET 4.5 includes a new feature to minify and bundle CSS and JavaScript within your web application. If you use any of the default project templates in Visual Studio 2012, this new feature is turned on.
What Is Bundling and Minification?
Most static content files, such as CSS and JavaScript, contain a lot of whitespace and comments. Although the whitespace and comments do not necessarily take up significant space, depending on the client’s Internet speed, the additional space can noticeably slow the page load of the site. Figure 28-13 shows the network traffic before minification.
An example of a JavaScript snippet before minification can be found is as follows:
function helloWorld(firstName) {
// Declare variables
var message = "Hello, " + firstName;
// Display an alert message
alert(message);
}
In the past, one of the best techniques for compressing static content was to enable HTTP compression on the web server, such as IIS. The most common compression method was to gzip the static files. The issue with this process is that it is very difficult to customize which files to minify. In larger organizations, you may need to get an administrator involved to update the web server for you. In ASP.NET, you now have the ability to have complete control over the minification process without the need for an administrator.
To take the minification process a step further, you can also bundle a group of files, such as all CSS files, into a single minified path.
Enabling Bundling and Minification
There are numerous ways to bundle and minify scripts and styles. One way to handle the bundling is to add a bundle.config file to the project and add the appropriate file listing in the file. However, you can also add the files to the bundle manually during the application start method.
To enable this feature in your projects, download the Microsoft ASP.NET Web Optimization Framework package from the package manager. After it’s downloaded and enabled, head right to theGlobal.asax file. Then, in the Global.asax file, include the namespace System.Web.Optimization. Finally, to bundle and minify CSS files located in the styles folder of your web, for example, add the following to the Application_Start method:
var cssBundle = new Bundle("~/styles/css");
cssBundle.IncludeDirectory("~/styles", "*.css");
BundleTable.Bundles.Add(cssBundle);
Like everything else in ASP.NET, developers can have complete control over the way CSS and JavaScript are bundled. This includes creating custom transforms, including and excluding specific files, and creating multiple bundles. It is important to note that the files are minified and added in the order they are listed. If a script file is dependent upon another file, it’s best to move the dependent file to a bundle above.
Figure 28-14 shows the network traffic after minification.
The JavaScript snippet from earlier, when compressed, will render like so:
function helloWorld(n){var t="Hello, "+n;alert(t)}
This article is excerpted from chapter 28 “Configuration” of Wrox’s Professional ASP.NET 4.5 (ISBN: 978-1-118-31182-0, May-2013, copyright John Wiley & Sons).
CSS and JavaScript Bundling and Minification in ASP.NET 4.5的更多相关文章
- asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
Bundling and Minification两个单词对今天的内容有个比较好的总结. 问题所在 一. 在asp.net包括mvc项目中,引入js和css也许有人认为是个很容易和很简单操作的事情,v ...
- [译]Bundling and Minification
原文:http://www.asp.net/mvc/overview/performance/bundling-and-minification============================ ...
- [Bundling and Minification ] 四、总结
一.ASP.NET MVC 里面提供了一个默认的绑定集合BundleTable.Bundles 位于System.Web.Optimization下的静态类BundleTable中的一个静态变量.以下 ...
- [Bundling and Minification ] 二、绑定的作用
本篇接上一篇[Bundling and Minification ] 一.如何绑定 Bundling的作用有二,一是合并文件减少资源请求的个数缩短资源请求的时间.二是自动更新到最新js或者css,当合 ...
- CSS 使用母版页的内容页如何调用css和javascript
方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head&g ...
- 新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- 新手程序员随笔2——初识html、css和javascript
翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- Sublime Text 3 格式代码插件 codeFormatter
一款可以对html.JS.CSS.PHP.python代码格式化的sublime插件 默认快捷键ctrl+alt+F,默认可以对html.js.css格式代码, 如果想对PHP格式化,需要PHP5.6 ...
- 解决IE11不能进行webTest脚本录制的方法
当win7的ie8升级到ie11后,我的vs2012里的web性能测试用不了了,在打开IE11后,录制栏不见了,在网上找了很多资料没有结果,最后,在IE工具里发展了原因 工具->管理加载项-&g ...
- Jakarta-Commons- BeanUtils学习笔记:
http://www.cnblogs.com/zhangyi85/archive/2009/04/22/1441341.html 1.什么是BeanUtils: BeanUtils主要提供了对于Jav ...
- Session案例
用户登入案例: 按一般的网站登入实例,用户在页面登入页输入账号.密码,验证通过后,在首页显示其"欢迎回来,xxx". 首先完成登入页login.html <!DOCTYPE ...
- MySQL 使用while语句向数据表中批量插入数据
1.创建一张数据表 mysql> create table test_while ( -> id int primary key) charset = utf8; Query OK, ro ...
- Android 获取WIFI MAC地址的方法
1. 经常用法,调用Android的API:WifiManager <uses-permission android:name="android.permission.ACCESS_W ...
- 【剑指Offer学习】【面试题14 :调整数组顺序使奇数位于偶数前面】
题目:输入一个整数数组,实现一个函数来调整该数组中数字的顺序.使得全部奇数位于数组的前半部分.全部偶数位予数组的后半部分. 这个题目要求把奇数放在数组的前半部分, 偶数放在数组的后半部分,因此全部的奇 ...
- Flume NG中的Kafka Channel
kafka(官网地址:http://kafka.apache.org)是一款分布式消息发布和订阅的系统 在Flume中的KafkaChannel支持Flume与Kafka整合,可以将Kafka当做ch ...
- asp.net中ScriptManager自带Ajax与jQuery事件冲突
问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突.通过在网上收索,发现很多人都遇到这个同样的问题 ...
- 常用JDBC连接字符串
1.MySQL Class.forName( " org.gjt.mm.mysql.Driver " ); Connection conn = DriverManager.getC ...