ASP.NET MVC 4 的Bundles功能打包压缩JS/CS文件

最新推荐文章于 2022-11-28 01:23:58 发布

yjpyt

最新推荐文章于 2022-11-28 01:23:58 发布

阅读量1k

点赞数

分类专栏： asp.net 文章标签： asp.net

asp.net 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法，如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感，同时通过移除JS/CSS文件案中空白、批注及修改JavaScript内部函数、变量名称的压缩手法，能有效缩小文件案体积，提高传输效率，提供使用者更流畅的浏览体验。

在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件，以提高网络加载速度和页面解析速度。更为重要的是通过捆绑可以解决IE浏览器的31个CSS文件连接的限制。在做ASP.Net项目时很多时候会使用一些开源的javascript控件。无形中增加了css和javascript文件的引用。如果手工将这些css文件合并将给将来版本升级造成很大的麻烦。于是，我们只好小心翼翼的处理这些css文件在页面中的引用。ASP.NET捆绑是ASP.NET 4.5的新功能，是System.Web.Optimization命名空间下。他提供了一些ASP.NET运行性能方面的优化，比如，一个页面可能有很多CSS/JS/图片,通过灵活的应用BundleTable类，他可以帮你将文件合并压缩代码优化成一个最理想的文件，然后输出到客户端，从而提高了浏览器下载速度。

现在我们终于有一个以相对比较完美的解决方案来解决css文件和javascirpt文件给我们带来的麻烦，BundleTable捆绑技术很好的解决了这个问题。

在ASP.NET MVC 4 Beta时代便已内建打包压缩功能，做法是在global.asax.cs的Application_Start加入

BundleTable.Bundles.EnableDefaultBundles();

如此，便可使用以下写法一口气将整个Scripts目录下的JS及Contents目录下所有CSS打包并压缩成单一文件案，改善网页载入效率: (参考)

最近在看ASP.NET MVC 4 RC，发现RC版在打包压缩做法上又有所革新，变得更加弹性有条理。

原本打包规则被藏在global.asax.cs Application_Start中，RC版起则多了一个新目录App_Start，其中包含RouteConfig.cs、FilterConfig.cs、BundleConfig.cs三个类，做法上改为通过WebActivator启动。新的系统配置将路由规则、过滤器及打包规则等注册逻辑由Application_Start中拆出来，各自放在独立文件案中，管理及修改起来一目了然，架构上更漂亮。

BundleConfig.cs的预设内容如下:

using System.Web;

using System.Web.Optimization;

namespace MyMvcApplicaiton

{

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

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

"~/Scripts/jquery-1.*"));

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

"~/Scripts/jquery-ui*"));

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

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*"));

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

"~/Scripts/modernizr-*"));

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

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

"~/Content/themes/base/jquery.ui.core.css",

"~/Content/themes/base/jquery.ui.resizable.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.button.css",

"~/Content/themes/base/jquery.ui.dialog.css",

"~/Content/themes/base/jquery.ui.slider.css",

"~/Content/themes/base/jquery.ui.tabs.css",

"~/Content/themes/base/jquery.ui.datepicker.css",

"~/Content/themes/base/jquery.ui.progressbar.css",

"~/Content/themes/base/jquery.ui.theme.css"));

}

跟Beta时代很大的差异是将JS与CSS加以群组化，分别定义出jquery, jqueryui, jqueryval, modernizr, css及themes/base/css等群组，让网页可以视需要只加载必要的JS及CSS文件群组，不像先前每次得打包整个目录，对于JS文件的加载顺序及相依性也能做较精准的调控。

而在.cshtml中，则使用Styles.Render及Scripts.Render载入BundleConfig.cs所定义的JS及CSS群组，例如:

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

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

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui",

"~/bundles/jqueryval")

@RenderSection("scripts", required: false)

</head>

<body>