ASP.NET MVC4：打包和压缩

引言

我不会说任何新东西，但我只是想分享 ASP.NET MVC 4 中的一项新功能“打包和压缩”。

在开始之前，让我简要介绍一下 JS/CSS 文件中的打包和压缩。

打包：这是文件的简单逻辑分组，可以通过唯一名称引用，并使用一个 HTTP 请求加载。

压缩：这是删除代码中不必要的空格、换行符和注释的过程，以减小其大小，从而提高加载时间。

背景 

基本上，开发人员会使用多个 JS 和 CSS 文件来实现代码的模块化、可读性和可维护性，这是一种很好的做法。但在某些情况下，这会导致网站整体性能下降。因为多个 JS 和 CSS 文件需要浏览器发出多个 HTTP 请求，导致网页的性能和加载时间下降。

在实际应用中，几乎所有网站都使用压缩技术来提高加载时间，但打包并不常用，因为每个页面都需要不同的文件集，而且应用程序也不支持使其变得更简单。

ASP.NET MVC 4 中的打包和压缩 

在 ASP.NET MVC 4 中 - Microsoft 提供了用于打包和压缩的程序集Microsoft.Web.Optimization（命名空间：System.Web.Optimization），它已默认安装在新的 ASP.NET MVC4 应用程序模板中，作为NuGet程序包。它允许应用程序在运行时压缩和打包文件。

在这里，我们将看到如何在 MVC 4 应用程序中实现打包和压缩。

为了演示，我将使用四个虚拟 JS 文件（JS-File-1.js, JS-File-2.js, JS-File-3.js 和 JS-File-4.js）来衡量网站的性能。

要开始，请创建一个新的 ASP.NET MVC 4 Web 应用程序。

 

然后创建一个新的控制器（DemoController）。在实际应用中，每个网站对每个页面都需要不同的 JS 和 CSS，所以我从 DemoController 创建了两个新视图（Index.aspx 和 Create.aspx）。

• Index.aspx 将引用 JS-File-1.js、JS-File-2.js

• Create.aspx 将引用 JS-File-3.js、JS-File-4.js

 

在开始实现打包和压缩技术之前，首先使用 firebug（Firefox 开发者工具）检查网页的实际性能。

Index.aspx

 

Create.aspx

在这里，我们可以看到 Index.aspx 发出了两个浏览器请求（JS-File-1.js, JS-File-2.js），响应大小为409.9 KB；类似地，Create.aspx 发出了两个浏览器请求（JS-File-3.js, JS-File-4.js），响应大小为427.2 KB。

要启用默认打包，请打开global.asax.cs并在Application_Start事件中写入以下行。 

BundleTable.Bundles.EnableDefaultBundles(); 

创建默认包

要启用默认包，请删除视图中的 JS/CSS 引用，并添加下面的代码行来引用包路径。

<script src="<%: Url.Content("~/Scripts/Demo JS Files/JS") %>" type="text/javascript"></script> 

但是默认打包的问题在于，它会在浏览器请求时下载该文件夹中的所有文件。

Index.aspx 

Create.aspx 

上图显示Index.aspx 需要 JS-File-1.js、JS-File-2.js，而Create.aspx 需要 JS-File-3.js、JS-File-4.js，但默认的压缩技术会对该文件夹中的所有文件进行压缩和打包。为了解决这类问题，引入了自定义包。

创建自定义包

来自Microsoft.Web.Optimization的Bundle类用于创建自定义包。要创建自定义包，我们需要创建一个 Bundle 类的对象，指定我们可以用来引用自定义包的虚拟路径以及它是 JavaScript 还是 CSS 的转换类型。

在我的场景中，我需要两组包，一组用于Index.aspx，另一组用于Create.aspx，因此我在 Application_Start 事件中创建了两个包。 

Bundle indexBundle = new Bundle("~/IndexBundle", typeof(JsMinify));
indexBundle.AddFile("~/Scripts/Demo JS Files/JS-File-1.js");
indexBundle.AddFile("~/Scripts/Demo JS Files/JS-File-2.js");
BundleTable.Bundles.Add(indexBundle);

Bundle createBundle = new Bundle("~/CreateBundle", typeof(JsMinify));
createBundle.AddFile("~/Scripts/Demo JS Files/JS-File-3.js");
createBundle.AddFile("~/Scripts/Demo JS Files/JS-File-4.js");
BundleTable.Bundles.Add(createBundle);

下面的代码用于在各自的视图中引用。  

<script src="<%: Url.Content("~/CreateBundle") %>" type="text/javascript"></script> 

好了，现在运行网站，再次检查网页（Index.aspx 和 Create.aspx）的性能。

Index.aspx 

 

Create.aspx 

 

现在您可以看到上图，Index.aspx只发出一个浏览器请求，响应大小仅为217.3 KB。之前是409.9 KB（在压缩和打包之前）。

类似地，Create.aspx只发出一个浏览器请求，响应大小仅为168.2 KB，而之前是427.2 KB。

技巧

在ASP.NET MVC 4项目中，_Layout.cshtml 文件将在文件头部包含引用 System.Web.Optimization 和 BundleTable.Bundles 的Razor 代码，用于 CSS 和 JavaScript 引用。因此，不要在 script/link 标签中添加纯虚拟路径，而是使用System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl()方法添加虚拟路径。它将打包和压缩后的文件在客户端浏览器中缓存更长时间。