SharePoint Online 中的缩小和捆绑

本文介绍如何使用将缩小和捆绑技术用于 Web Essentials,从而减少 HTTP 请求数并减少 SharePoint Online 中的页面加载时间。

自定义网站时,可能需要将大量额外文件添加到服务器以支持自定义。添加额外 JavaScript、CSS 和图像会增加向服务器发出 HTTP 请求的次数,而这又会增加显示网页所需的时间。如果具有多个同类型文件,则可捆绑这些文件以提高下载速度。

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

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

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

重要: Web Essentials 是一个基于社区的第三方开源项目。此软件是 Visual Studio 2012 和 Visual Studio 2013 的扩展且不受 Microsoft 支持。若要下载 Web Essentials,请访问网站 http://vswebessentials.com/download

Web Essentials 提供两种形式的捆绑:

  • .bundle:适用于 CSS 和 JavaScript 文件

  • .sprite:适用于图像(仅适用于 Visual Studio 2013)

如果现有功能包含自定义母版页内引用的捆绑元素,则可使用 Web Essentials。

自定义母版页中的品牌元素的屏幕截图

在 Web Essentials 中创建 TE000127218 和 CSS 捆绑

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

  2. 右键单击所选文件,然后在上下文菜单中选择“Web Essentials”>“创建 JavaScript 捆绑文件”。例如:

    屏幕截图显示 Web Essentials 菜单选项

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

创建 JavaScript 和 CSS 捆绑时,Web Essentials 将创建一个名为 recipe 文件的 XML 文件,此文件可标识 JavaScript 和 CSS 文件以及一些其他配置信息:

JavaScript 和 CSS 脚本文件的屏幕截图

此外,如果“缩小”标记在捆绑 recipe 中被设置为 true,则文件大小将减少并且文件将捆绑在一起。这意味着将创建新的缩小版本的 JavaScript 文件,你可以在母版页中引用这些文件,

设置为 true 的 minify 标志的屏幕截图

在网站中加载页面时,可以通过 Web 浏览器使用开发人员工具(如 Internet Explorer 11)查看发送至服务器的请求数,以及每个文件的加载时间。

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

屏幕截图显示正在下载 80 项

CSS 和 JavaScript 文件捆绑在一起后,请求数将降至 74,并且相比原始文件,单独下载每个文件所用时间只稍微增加:

屏幕截图显示正在下载 74 项

捆绑后,JavaScript 捆绑文件将从 815KB 大幅缩小至 365KB:

屏幕截图显示缩减的下载大小

通过创建图像 sprite 来捆绑图像

与捆绑 JavaScript 和 CSS 文件的方法类似,可以将许多小图标和其他常用图标合并为一个较大的 sprite 工作表,然后使用 CSS 显示单个图像。用户的 Web 浏览器将一次下载 sprite 工作表,然后将其缓存到本地计算机上,而无需分别下载单个图像。这将通过减少下载次数和 Web 服务器的往返次数来改善页面加载性能。

在 Web Essentials 中创建图像 sprite

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

  2. 右键单击所选文件,然后在上下文菜单中选择“Web Essentials”>“创建图像 sprite”。例如:

    屏幕截图显示如何创建图像子画面
  3. 选择保存 sprite 文件的位置。.sprite 文件是一个用于描述 sprite 中设置和文件的 XML 文件。下图显示 sprite PNG 文件及其相应 .sprite XML 文件的示例。

    分画面文件的屏幕截图

    分画面 XML 文件的屏幕快照

扩展你的技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×