SharePoint 中的缩小和捆绑

本文介绍如何将缩小和捆绑技术与 Web Essentials结合使用，以减少 HTTP 请求数并减少在 SharePoint 中加载页面所需的时间。

自定义网站时，最终可能会向服务器添加大量额外文件以支持自定义。 添加额外的 JavaScript、CSS 和图像会增加对服务器的 HTTP 请求数，这反过来又增加了显示网页所需的时间。 如果有多个同一类型的文件，则可以捆绑这些文件，以便更快地下载这些文件。

对于 JavaScript 和 CSS 文件，还可以使用名为“缩小”的方法，通过删除空格和其他不必要的字符来减小文件的总大小。

使用 Web Essentials缩小和捆绑 JavaScript 和 CSS 文件

可以使用 Web Essentials 等第三方软件来捆绑 CSS 和 JavaScript 文件。

重要

Web Essentials是一个基于社区的第三方开源项目。 该软件是 Visual Studio 2012 的扩展，Visual Studio 2013不受 Microsoft 支持。 若要下载 Web Essentials，请访问 Web Essentials 2012 上的网站。

Web Essentials提供两种捆绑形式：

• .bundle：用于 CSS 和 JavaScript 文件
• .sprite：对于仅在 Visual Studio 2013) 中可用的图像 (

如果具有一些在自定义母版页中引用的品牌元素的现有功能，则可以使用 Web Essentials，例如：

在 Web Essentials中创建TE000127218和 CSS 捆绑包

1. 在 Visual Studio 的 解决方案资源管理器 中，选择要包含在捆绑包中的文件。

2. 右键单击所选文件，然后从上下文菜单中选择“Web Essentials>Create JavaScript 捆绑文件”。 例如：

   

查看捆绑 JavaScript 和 CSS 文件的结果

创建 JavaScript 和 CSS 捆绑包时，Web Essentials会创建一个名为“配方文件”的 XML 文件，该文件标识 JavaScript 和 CSS 文件以及一些其他配置信息：

此外，如果在捆绑方案中将缩小标志设置为 true，文件的大小会减小并捆绑在一起。 这意味着已创建可在母版页中引用的 JavaScript 文件的新缩小版本。

从网站加载页面时，可以使用 Web 浏览器中的开发人员工具（例如 Internet Explorer 11）查看发送到服务器的请求数以及每个文件加载所花费的时间。

下图是在缩小之前加载 JavaScript 和 CSS 文件的结果。

将 CSS 和 JavaScript 文件捆绑在一起后，请求数下降到 74 个，每个文件单独下载的时间仅略长于原始文件：

捆绑后，JavaScript 捆绑文件会从 815 KB 显著减少到 365 KB：

通过创建图像子画面来捆绑图像

与捆绑 JavaScript 和 CSS 文件的方式类似，可以将许多小图标和其他常见图像合并到更大的子画面工作表中，然后使用 CSS 显示各个图像。 用户的 Web 浏览器下载一次子画面表，然后将其缓存在本地计算机上，而不是下载每个单独的图像。 这通过减少下载次数和到 Web 服务器的往返次数来提高页面加载性能。

在 Web Essentials中创建图像子画面**

1. 在 Visual Studio 的 解决方案资源管理器 中，选择要包含在捆绑包中的文件。

2. 右键单击所选文件，然后从上下文菜单中选择“Web Essentials>Create图像子画面”。 例如：

   

3. 选择保存子画面文件的位置。 .sprite 文件是一个 XML 文件，用于描述子画面中的设置和文件。 下图显示了子画面 PNG 文件及其相应的 .sprite XML 文件的示例。