探寻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

刚开始没有什么问题,而随着我们项目的越来越大,需要引入的资源文件越来越多的时候,我们就难免会遇到以下这些问题:

  1. 需要在Production环境将这些文件替换为压缩版本(e.g  jQuery.xxx.min.js)
  2. CSS文件需要借助其他工具去压缩
  3. 引入的文件越来越多,难以管理
  4. 大量的资源文件导致浏览器加载缓慢

How

而在ASP.NET MVC3空出世后,我们就再也不需要受到以上这些困扰了。

首先,当我们开启了Optimizations开关后,当Web.config文件中的System.Web/Compilation@debug设置为false的时候(在生产环境下,需要设置为false),我们在浏览器端获取到的资源文件将会是经过压缩和捆绑的。这样做的好处是:

  1. 减少了服务器端的流量,给服务器退烧(通过压缩)
  2. 自动缓存资源文件,服务器端不更改的话,不会重新加载(通过缓存机制)
  3. 由于大多浏览器限制了对一个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文件更小,因为我的示例实际上就一样,所以看不出来差别。

这篇文章就到这里了,最近工作的事很闹心啊,做技术人的洁癖和敏感,很他妈要命!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-EasyUI缺陷修复与扩展

不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这块比较敢兴趣,讲不讲验证还是看大家的反映),我们应该对系统有一个小结。 ...

1736
来自专栏Theo Tsao

Ionic3学习笔记(十)实现夜间模式功能

在 ./src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件,分别用于日间模式、夜间模式的设置。

563
来自专栏DannyHoo的专栏

iOS10适配推送中的报错

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

531
来自专栏跟着阿笨一起玩NET

焦点事件中的Validating处理方法

本文转载:http://tech.it168.com/oldarticle/2006-04-03/200604031055437.shtml

121
来自专栏从零开始学自动化测试

Selenium2+python自动化60-异常后截图(screenshot)

前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据。 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,...

3295
来自专栏性能与架构

Express.js 4,Node.js,MongoDB REST API 简易教程

教程内容 采用测试驱动开发的方式,开发一个简单的 REST API,包括基本的 POST/GET/PUT/DELETE 操作 先编写好针对各个接口的测试代码,包...

3466
来自专栏Core Net

ASP.NET Core 2.0 : 三. 项目结构

3655
来自专栏FreeBuf

自己动手Bypass Android Exchange

一直以来巨硬提供的Exchange电子邮件系统都是企业级邮件解决方案的首选,它具有NB的安全性,同时也具备很多优秀的功能。 用户在使用Exchange服务时,电...

1798
来自专栏葡萄城控件技术团队

VS2010 Extension实践(2)

在上一篇(VS2010 Extension (1)实践)里,主要展示了如何使用MEF扩展VS2010,来扩展编辑控制和展现自己的UI;在实现QuickToolb...

1949
来自专栏Seebug漏洞平台

Sparkjava Framework 文件遍历漏洞(CVE-2016-9177)分析与探究

Author:dawu(知道创宇404实验室) Date:2016-11-16 0x00 漏洞概述 1.漏洞简介 Sparkjava是一款小型的web框架,它...

3055

扫描关注云+社区