第一周的NuGet软件包 - ASP.NET子画面和图像优化

[原文发表地址] NuGet Package of the Week #1 - ASP.NET Sprite and Image Optimization

[原文发表时间] Mar 6, 2011, 09:50 PM

我在想既然NuGet.Net软件包管理网站开始逐渐充实，那么我应该开始在那寻找宝石了（没有双关含义）。您知道，就是那种大家可能没法发现的非常有用的东西。我将主要寻找开源项目，那些我认为它们很有用的项目。我会查看它们如何生成NuGet包，他们设计方式的有趣之处，开箱体验（以及可改进之处），当然也会关注软件包本身所做的事。

子图片和图像优化预览版本3

首先，我注意到ASP.NET子画面和图像优化预览版本已经更新到预览版本3了。这是微软可能在将来的ASP.NET中发布但是您现在就可以使用的一个东西。它甚至更容易使用，因为它就在NuGet中。

他们架构的很好。实际上，总共有3个软件包，其中“叶子”软件包依附于核心软件包。

•  AspNetSprites-Core
• AspNetSprites-WebFormsControl
• AspNetSprites-MvcAndRazorHelper

这是提供给ASP.NET来自动生成CSS子图片和内嵌图像的API。它可以在ASP.NET WebForm、MVC以及Web页面中使用。如果您正在编写自己的库并希望它通用于所有3个ASP.NET技术，这是一个很好的例子（请记住它全是ASP.NET）请参看这里获取所有的源代码.

子图片背后的理念是——如果您有一个页面上有几十甚至几百个小图片，可能是页面上的图标，此时，您将会因为大量的HTTP请求而耗费时间。相反，为什么不拿回有效图片拼出来的单个大图片让浏览器在运行时再使用CSS分割它们为“子图片”呢。然而，实际创建这些网格状图片往往很麻烦。

您不仅需要原始图片，还需要创建一个CSS文件，包含您所需要的图片在源图片中所处的相对位置。

您也可以在一些新的浏览器中通过Base-64编码小图片创建“内嵌图片”并把他们放在页面上的img标签中。

WebForm中的ASP.NET子图片

他们在安装软件包时生成的 App_Sprites文件夹中添加了一个有用的readme.txt（这是一种最佳实践）。下面就是readme。它很有用，因为它告诉你一切需要知道的东西并包括指向文档的指针。您会惊讶于极少软件包这么做。请记住您的NuGet用户可能在Visual Studio中或在其附近，而且因为NuGet的存在是为了避免我们辛辛苦苦地找东西，请不要让您的用户找东西找得很辛苦。

欲知ASP.NET子图片和图像优化框架的详细信息，请访问https://aspnet.codeplex.com/releases/view/61896.

快速入门：

1）       将您的图片添加至“App_Sprites”目录。

2）       取决于您的应用程序类型：

****************************

*** ASP.NET Web Forms 4 ****

****************************

**********************************

*** ASP.NET MVC 3 (ASPX Views) ***

**********************************

********************************************************

*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***

********************************************************

@Sprite.ImportStylesheet("~/App_Sprites/")

@Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg")

我打开Visual Studio并生成一个新的ASP.NET WebForm项目。请记住我可以通过命令行，在VS中通过对话框或在VS使用Powershell调用NuGet。

我在解决方案管理器中右击引用文件夹，并在线搜索“Sprite”。我安装AspNetSprites-WebFormsControl。

现在，我只要添加一些图片到 App_Sprites 文件夹。这是我在资源管理器中的图片：

接下来，我只需运行一次此应用程序。现在看看相同的文件夹。注意到sprite0.png了吗？（当然您也可以覆盖其中一些设置。）请注意这个新的子图片文件是怎样合并所有小图片的。

同时还有新的CSS文件和新的CSS类来访问每个图像。太酷了。

.camera-png

{

width:48px;

height:48px;

background-image:url(sprite0.png);

background-position:-0px -0px;

}

不过，有了 WebForm我就不必担心这个问题。请记住WeForm搞的可是控件。我可以添加此控件，WebForm就可以处理IMG 标签和CSS标签。

<asp:imagesprite id="Sprite1" runat="server" <br="">ImageUrl="~/App_Sprites/video.png" /></asp:imagesprite>

为了获取最大兼容性，图片按以下方式输出。

<img id="MainContent_Sprite1" class="video-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

非常酷。

在 ASP.NET MVC中的ASP.NET Sprites (作为一个 Razor帮助程序)

接下来，我重复相同动作，只是在ASP.NET MVC项目中install-package AspNetSprites-MvcAndRazorHelper 。

对于一个ASP.NET MVC项目，我将在我的_Layout.cshtml里手动添加CSS:

@Sprite.ImportStylesheet("~/App_Sprites/")

接下来，我将在所有我想看见图片的地方使用 Sprite 帮助程序:

@Sprite.Image("~/App_Sprites/video.png")

除了使用体验更像MVC之外，它的运行与在WebForm中一样。同样，该软件包是一个极好的演示一个库可以怎样为WebForms、Web页面和MVC所用的示例。

在评论中畅所欲言推荐NuGet库吧，我将把他们添加到一个队列中，我相信这队列将会非常大！