探寻ASP.NET MVC鲜为人知的奥秘(1):对LESS的支持
在ASP.NET MVC3中(从那时开始),我们拥有了对js和css等文件的捆绑(Bundling)和压缩(Minification)的能力,这是ASP.NET性能优化工作的一部分。
想一下很久以前,我们在mvc2的时代,我们使用这样的方式引入js和css文件:
<script type="text/javascript" src="@Url.Content("~/Script/Script.js")"></script>
Why
刚开始没有什么问题,而随着我们项目的越来越大,需要引入的资源文件越来越多的时候,我们就难免会遇到以下这些问题:
- 需要在Production环境将这些文件替换为压缩版本(e.g jQuery.xxx.min.js)
- CSS文件需要借助其他工具去压缩
- 引入的文件越来越多,难以管理
- 大量的资源文件导致浏览器加载缓慢
How
而在ASP.NET MVC3空出世后,我们就再也不需要受到以上这些困扰了。
首先,当我们开启了Optimizations开关后,当Web.config文件中的System.Web/Compilation@debug设置为false的时候(在生产环境下,需要设置为false),我们在浏览器端获取到的资源文件将会是经过压缩和捆绑的。这样做的好处是:
- 减少了服务器端的流量,给服务器退烧(通过压缩)
- 自动缓存资源文件,服务器端不更改的话,不会重新加载(通过缓存机制)
- 由于大多浏览器限制了对一个host同时连接数量,所以加快了网站访问速度(通过捆绑)
以下是一个简单的示例,我这里用一个新建的ASP.NET MVC项目进行演示:
在新建一个MVC项目后,打开App_Start/BundleConfig.cs文件,可以看到一个静态的RegisterBundles方法,这个方法和RegisterRoutes方法一样,都是在应用程序在首次加载的时候调用的,也就是说,所有的捆绑和压缩的操作都会在应用程序加载的时候执行一次,以后会直接引用它,而当在应用程序启动后,人工干预了某个在捆绑中注册了的资源文件,MVC也只会去重新加载和压缩这一部分。
在这个RegisterBundles方法体内,可以设置BundleTable.EnableOptimizations静态属性,这个静态属性默认是设置为True的,也就是当网站在生产环境下,会对css和js等文件进行捆绑和压缩,而在开发模式下不会执行这些操作,当然你也可以通过设置为False组织它这种行为,
在方法体内,可以通过调用BundleCollection参数的Add方法增加我们要捆绑的文件:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
这里的”~/bundles/bootstrap“是一个虚拟的路径,当我们在View文件中引用的时候,实际加载的是"~/Scripts/bootstrap.js"和"~/Scripts/respond.js"两个文件,Include方法的参数为一个字符串类型的参数组,所以我们可以添加任意多个的文件,在View文件中使用如下方式进行应用:
@Scripts.Render("~/bundles/bootstrapr")
捆绑机制同时也支持CDN
var jqueryCdnPath = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery",
jqueryCdnPath).Include(
"~/Scripts/jquery-{version}.js"));
Focus came
而这篇文章要说的重点是,直接使用这种捆绑和压缩的机制完成LESS的编译,虽然我们也可以使用LESSCSS在浏览器端编译less,但是并不能得到编译过的CSS文件,而很多时候我们需要得到它,判断是不是我们预想的那样。
更多关于LESS的介绍以及LESS的优势,参见这里
首先,我们需要添加dotless程序包:
之后,我在项目中Content目录下,添加一个StyleSheet1.less,代码如下:
@color:#F7F7F7;
body{
background-color:@color;
}
这时候,您并不需要去担心IIS会对less后缀的文件返回404,因为最终输出到客户端的是一个经过编译的CSS文件。
在BundleRegister方法中,添加如下代码:
var lessbundle = new Bundle("~/bundles/less").Include("~/Content/*.less");
lessbundle.Transforms.Add(new LessTransform());
lessbundle.Transforms.Add(new CssMinify());
bundles.Add(lessbundle);
在代码第一行,我们添加了对Content目录下所有后缀为less文件的捆绑,第二行添加了LESS的转换功能,这个功能就是由dotless提供的,第三行添加了对这一捆绑提供压缩的功能,这样我们在Production环境下,就会得到编译并且压缩的css代码;
在生产环境下,浏览器得到的源码中会找到类似以下的代码:
<link href="/bundles/less?v=vnAgv976RJi72MAy6iBw7DhQ9yxBbhXMXY0yOqNN5BU1" rel="stylesheet"/>
打开这个路径,会得到已经编译过的CSS代码:
body{background-color:#f7f7f7}
而在Production环境下,回更近一步,将css中的空白字符去掉,使CSS文件更小,因为我的示例实际上就一样,所以看不出来差别。
这篇文章就到这里了,最近工作的事很闹心啊,做技术人的洁癖和敏感,很他妈要命!
- Spring boot · 链接池配置
- Linux下命令行图片格式转换
- 用SQL解一道有趣的数学题:Gauss和Poincare
- OpenSSL 转换证书格式
- 电子邮件服务器DKIM配置
- 自相矛盾:一个进程可以自成死锁么?
- 数据库安全·开发加密插件
- wordpress无法安装这个包。: PCLZIP_ERR_MISSING_FILE (-4) : Missing archive file 'C:WINDOWSTEMP/wordpress-4.
- 数据库安全·数据加密
- Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣
- 数据库安全·Token 认证
- 数据库安全·用户/角色认证
- 防止在训练模型时信息丢失 用于TensorFlow、Keras和PyTorch的检查点教程
- 帝国cms如何调用栏目别名作为分类标题?[!--classname--]标签不能用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- XDCTF2014 部分Writeup
- Centos7安装k8s集群1.15.0版本
- MSSQL语句执行工具asp版
- springboot版本helloworld发布到k8s示例
- 《K8S权威指南》读书笔记-入门篇
- 回忆phpcms头像上传漏洞以及后续影响
- k8s基本原理
- breakpad概述
- k8s源码分析- Informer机制
- Golang http请求源码分析
- 新浪某站CRLF Injection导致的安全问题
- k8s使用的web框架:go-restful 源码分析
- 图解Golang channel源码
- k8s源码分析(2)- kube-apiserver
- Android一行解决所有双击优化的问题