在ASP中捆绑。网

ASP。网is a technology stack that has earned a reputation in enhancing productivity. With the release of ASP.NET 4.5, the stack has pushed the envelope by adding automated bundling of web resources, making it easy and flexible to work with.

在本文中，我将介绍一下ASP.NET中的捆绑。我将探讨在任何ASP中设置捆绑是如何无缝的。网络项目。

ASP。网4.5, the framework has gained a new namespace calledSystem.Web.Optimization．让我们看看这是如何工作的。

设置

在本教程中，我从一个空ASP开始。NET MVC项目。通过这种方式，我可以专注于自动设置捆绑所需的内容。同样的基本步骤也适用于WebForms。在本教程中，我将使用Razor和c#。

在点击新项目的提示后，在NuGet包管理器控制台中添加这些包:

PM> Install-Package microsoft . asp.net . mvc PM> Install-Package jQuery PM> Install-Package Bootstrap PM> Install-Package microsoft . asp.net . optimization

我想让你注意一下叫做NuGet的包Microsoft.AspNet.Optimization．如果您正在使用现有的ASP。网project, this NuGet package makes your job easy. After it gets installed, all you have to do is set up the rest of the plumbing.

使用web优化框架，您可以获得自动化管理web资源的工具。你可以在这里找到正式文件MSDN．

现在，添加一个名为App_Start如果你还没有主解的话。我们需要通过添加这个静态类来设置捆绑。

公共类BundleConfig{公共静态无效RegisterBundles(BundleCollection bundles) {}}

路由是与任何现有项目一起设置的，所以我不会在本教程中包括它。

让ASP。网framework know about our newly configured bundles, do this in theGlobal.asax：

公共类全局:HttpApplication{受保护的无效Application_Start(对象发送器，EventArgs e) {bundlecconfig . registerbundles (BundleTable.Bundles);}}

ASP。网is an event-driven framework. If you can imagine, the IIS server sits idle, waiting for events. In this case it would be client browser requests through HTTP. When your application first fires up, ASP.NET callsApplication_Start在Global.asax．内部Application_Start，在这里您可以设置想要在应用程序中使用的特定包。

最后，我的解决方案是这样的:

注意交通

现在是时候添加包了，看看它在浏览器中是如何发挥作用的。将此添加到BundleConfig它是我上面指定的静态类:

公共类BundleConfig{公共静态无效RegisterBundles(BundleCollection bundles) {bundles。添加(new StyleBundle("~/bundle/bootstrap-styles") .Include("~/Content/bootstrap.css") .Include("~/Content/bootstrap-theme.css") .Include("~/Content/Site.css"));包。Add(new StyleBundle("~/bundle/Home/Index-styles") .Include("~/Content/StyleSheet1.css") .Include("~/Content/StyleSheet2.css") .Include("~/Content/StyleSheet3.css"));包。添加(new ScriptBundle("~/bundle/bootstrap-scripts") .Include("~/Scripts/bootstrap.js") .Include("~/Scripts/jquery-{version}.js") .Include("~/Scripts/modernizr-{version}.js"));包。Add(new ScriptBundle("~/bundle/Home/Index-scripts") .Include("~/Scripts/JavaScript1.js") .Include("~/Scripts/JavaScript3.js") .Include("~/Scripts/JavaScript3.js"));}}

你的具体需求会有所不同。上面的方法需要一个BundleCollection作为一个参数。注意，这是BundleTable。包来自Global.asax．然后，我设计样式和脚本包来满足我的特定需求。

我使用{version}通配符告诉捆绑引擎抓取我的解决方案中出现的任何版本的jQuery。在发布配置jQuery.min.js被添加到包中，但不在调试中。这使我在使用jQuery时在开发环境中具有灵活性。我可以更换不同版本的jQuery，我的捆绑设置不会关心。同样的通配符技术也适用于任何其他客户端库。

因为我可以创建自己的包，所以我可以为特定的屏幕定制所需的资源。

我把~ /包/ bootstrap-styles而且~ /包/ bootstrap-scripts的_Layout.cshtml主页。由于它包含大量的引导管道，所以我将在本教程中省略它。

这是我的Index.cshtmlRazor页面是这样的:

@ {ViewBag。标题= "索引";} @Styles.Render("~/bundle/Home/Index-styles") 
Hello World
 
一定要检查像这样的符号:。< / p > @Scripts.Render(“~ /包/ Home / Index-scripts”)

一件容易的事。一旦定义了包，就可以将它们放在应用程序中需要的任何位置。我遵循一个简单的惯例{控制器}/{行动}定义包。你也可以这样做。

如果你发现你得到Razor页面错误，因为它不能找到风格。渲染或脚本。渲染．一定要在你的. config这是在的观点文件夹中。

< system.web.webPages。剃须刀>…< pageBaseType = " System.Web.Mvc页面。WebViewPage"> …"<添加名称空间= "包含。优化"/>    < / system.web.webPages.razor >

这告诉Razor引擎包含System.Web.Optimization命名空间时呈现动态HTML。您还可以为您的特定项目包括任何其他需要的名称空间。这将节省你必须完全合格的每个剃须刀扩展。

有了这些，让我们看看网络流量:

红色表示浏览器处于空闲状态。黄色是浏览器发出请求所需的时间。蓝色是从服务器获得响应所需的时间。在大多数现代浏览器中，每个域一次可以执行大约6个请求。如果需要超过6个，浏览器就会等待。最顶部的请求是我必须从服务器获取的动态HTML。

为什么这很重要?

打个比方，可以把后端c#编程语言想象成一艘宇宙飞船。当你旅行时，你会获得速度和时间扭曲的能力。只要您的后端在服务器上本地运行，您就可以获得高性能。但是，当请求管道到达HTTP时，情况就完全不同了。

我想把HTTP网络协议看作是一辆骡车。无论您在后端做了多少优化，您总是可以依赖HTTP很慢这一事实。所以，就像一辆骡车一样，在让它穿过城镇之前，最好先装上足够的食物。对服务器进行多次往返必定会降低性能。

HTTP请求开销很大。您的主要目标是减少通过HTTP进行的往返次数。

启用

要在框架中打开捆绑，您所需要做的就是更改. config在解决方案文件夹中。

<编译debug="false" targetFramework="4.5" />

你也可以硬编码:

BundleTable。EnableOptimizations = true;

在c#中硬编码时，它优先于. config．在典型的设置中，您可以使用. config转换以在发布模式中启用它。没有必要尝试调试简化的JavaScript代码。

让我们看看捆绑的流量:

美丽。一旦加载了动态HTML，资源就开始加载。在这里，我充分利用了浏览器的功能，因为我正好有六个资源。注意，直到呈现所有其他资源，最后一个资源才启动。这是因为它是一个网页字体，它起源于一个CSS包。

缓存

当捆绑被打开时，一个额外的好处是资源会在浏览器中缓存大约一年。如果在此之前更改了资源，则附加到末尾的查询字符串也将更改。这实际上会使浏览器不再需要的任何资源过期。这通常被称为缓存破坏。

例如，这是我们捆绑的资源的样子:

/包/ bootstrap-styles吗?v = epi1k_G4Tsd0o4dXIOJcBg5gefY7ieCSx0AUDxqm78U1 /包/ Home / Index-styles吗?v = uxFDb5XiuKadZOyd2DKyzUU-mh3OUTNuikUDUlL7e_Q1 /包/ Home / Index-scripts吗?v = Giv511fvuZRlJKLjJDPqmIxOhmtht9zFlW7lvvTMf0Y1 /包/ bootstrap-scripts吗?v = j4YIBwFVDdtvOMWp63GzkWLSoYrcw0ertU_njZLALnk1

在末尾追加的查询字符串是来自每个bundle的特定内容的散列。当bundle中的内容发生变化时，作为查询字符串附加的散列也将发生变化。

您可以检查HTTP报头。

的到期HTTP报头设置为一年后过期。

结论

ASP。网is a cool technology designed to make your life easy. What I love the most about this is how the engine renders<链接>而且<时尚>标签给你。我一直觉得最麻烦的是这些标签是如何到处乱放的。这使得管理网络资源成为一场噩梦。

我希望您能够看到在项目中添加自动捆绑是多么的无缝。要获得演示基本技术的简单演示，请务必查看GitHub．

你觉得ASP怎么样?网’s bundling features? Do you have any tips for improving performance?