JS/CSS文件的打包合并（Bundling）及压缩（Minification）是指将多个JS或CSS文件打包合并成一个文件，并在网站发布之后进行压缩，从而减少HTTP请求次数，提高网络加载速度和页面解析速度。压缩功能实现了对javascript脚本和CSS进行压缩的功能，它能够去除脚本或样式中不必要的空白和注释，同时能够优化脚本变量名的长度。

　　在ASP.NET MVC 4中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现。

　　1. 新建ASP.NET MVC 4空项目，引用System.Web.Optimization

　　1>、新建ASP.NET MVC 4空项目：

　　2>、引用System.Web.Optimization

　　通过NuGet添加对System.Web.Optimization的引用：

　　2. ASP.NET MVC 4项目使用System.Web.Optimization

　　1>、BundleConfig.cs

　　在类文件BundleConfig.cs中配置需要捆绑的JS及CSS文件。

using System.Web;

using System.Web.Optimization;

namespace MvcExample

{

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        }

    }

}

　　2>、_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/jquery")

    @RenderSection("scripts", required: false)

</head>

<body>

    @RenderBody()

</body>

</html>

　　3>、Global.asax

　　在中添加代码：

BundleConfig.RegisterBundles(BundleTable.Bundles);
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MvcExample

{

    // Note: For instructions on enabling IIS6 or IIS7 classic mode,

    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication

    {

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

        }

    }

}

　　4>、Web.config

　　在根目录及Views文件夹下的Web.config中添加命名空间引用：

<add namespace="System.Web.Optimization"/>

　　3. ASP.NET MVC 4项目JS/CSS打包压缩效果

　　1>、查看加载原始JS/CSS效果

　　完成上面的项目代码之后，运行查看源文件：

　　2>、查看捆绑压缩JS/CSS效果

　　修改根目录下Web.config ，将debug设置为false。

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

　　在Firebug中查看css文件压缩后的加载内容，可以看出原始css文件中的注释及空白换行均被删除。

　　启用JS/CSS文件压缩合并，除了可以在Web.config中配置，也可以在BundleConfig.cs或Global.asax中添加代码：

BundleTable.EnableOptimizations = true;

　　BundleConfig.cs

using System.Web;

using System.Web.Optimization;

namespace MvcExample

{

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            BundleTable.EnableOptimizations = true;

        }

    }

}
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MvcExample

{

    // Note: For instructions on enabling IIS6 or IIS7 classic mode,

    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication

    {

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            BundleTable.EnableOptimizations = true;

        }

    }

}

　　4. 参考资料

　　http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩的更多相关文章

  1. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  2. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  3. JS&CSS文件请求合并及压缩处理研究（一）

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...

  4. JS&CSS文件请求合并及压缩处理研究（四）

    本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...

  5. JS&CSS文件请求合并及压缩处理研究（二）

    上篇交待了一些理论方面的东西,并给出了另外一种解决方案的处理流程.本篇将根据该处理流程,开始代码方面的编写工作. 1,打开VS,新建ASP.NET MVC Web项目,项目类型选择空.名称为 Mcmu ...

  6. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  7. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  8. (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...

  9. ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

随机推荐

  1. yii2更改面包屑的首页链接

    <?= Breadcrumbs::widget([ 'homeLink' => ['label' => 'Home', 'url' => Yii::$app->getHo ...

  2. Activity类生命周期

    Activity通常就是一个单独的屏幕.每一个活动都被实现为一个独立的类,并且从活动基类中继承而来,活动类将会显示由视图控件组成的用户接口,并对事件作出响应. 从开发者角度看,Activity是一个J ...

  3. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  4. asp.net identity 2.2.0 中角色启用和基本使用（四）

    创建角色相关视图 第一步:添加视图   打开RolesAdminController.cs   将鼠标移动到public ActionResult Index()上  右键>添加视图   系统会 ...

  5. CQRS\ES架构介绍

    大家好,我叫汤雪华.我平时工作使用Java,业余时间喜欢用C#做点开源项目,如ENode, EQueue.我个人对DDD领域驱动设计.CQRS架构.事件溯源(Event Sourcing,简称ES). ...

  6. Java多线程14：生产者/消费者模型

    什么是生产者/消费者模型 一种重要的模型,基于等待/通知机制.生产者/消费者模型描述的是有一块缓冲区作为仓库,生产者可将产品放入仓库,消费者可以从仓库中取出产品,生产者/消费者模型关注的是以下几个点: ...

  7. chrome浏览器渲染白屏问题剖析

    刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~ 大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到.我的浏览器版本是 到目前为止应该是最新版(release版本 ...

  8. 用手机访问本地环境的利器ngrok

    我们在调试移动端页面,尤其是调试微信页面的时候,会遇到这样的情况,手机连着公司的wifi,开发环境(台式机)插着公司的网线,我们要用手机来访问开发环境下的页面.这个时候,如果网线和wifi是在同一个网 ...

  9. 让我欲罢不能的node.js

    从我大一接触第一门编程语言C开始,到现在工作三年陆续接触到了C.汇编.C++.C#.Java.JavaScript.PHP,还有一些HTML.CSS神马的,从来没有一门语言让我像对node.js一样的 ...

  10. WAMPServer 默认安装启动后，图标显示橙黄色

    说明:我是在家的电脑上面学习的WAMPServer的,而家的电脑很干净.这次来学校以后,实验室的电脑被我经常的折磨,今天在安装以后,启动后,发现图标有红色到黄色,就停止了.其实,问题的根源很简单,某个 ...