UiImageBundles

图像捆绑 是一种构造，通过减少服务器获取图像的往返 HTTP 请求数量来提高应用程序性能。GWT 可以将多个图像文件打包到单个大文件中，从服务器下载并作为 Java 对象进行管理。

客户端捆绑使图像使用更高效

通常，应用程序使用许多用于图标的小图像。在 HTML 中，每个图像都存储在单独的文件中，浏览器被要求从 Web 服务器下载每个文件作为单独的 HTTP 事务。这种处理图像的标准方法在几个方面可能会浪费资源。

• 高开销：在标准 Web 应用程序中，每个图像都需要向服务器发送一个 HTTP 请求。在许多情况下，这些图像都是图标，实际图像大小非常小。在这种情况下，图像大小通常小于与图像数据一起发送回来的 HTTP 响应报头。这意味着大多数流量都是开销，只有很少一部分是实际内容。

• 无用的新鲜度检查：传统图像处理在其他方面也存在浪费。即使图像已被客户端缓存，也会发送 304（“未修改”）请求以检查图像是否已更改。由于图像很少更改，这些新鲜度检查也是浪费的。

• 阻塞 HTTP 连接：此外，HTTP 1.1 要求浏览器将每个域/端口的传出 HTTP 连接数限制为两个。大量的图像请求会占用浏览器的可用连接，从而阻塞应用程序的 RPC 请求。在大多数应用程序中，RPC 请求是应用程序需要执行的实际工作。

发送许多单独的请求和新鲜度检查的最终结果是应用程序启动缓慢。

GWT ImageResource 解决了这些问题。多个 ImageResources 在单个 ClientBundle 中声明，它将许多图像组合成单个图像，以及用于从组合中访问单个图像的接口。用户可以定义包含应用程序使用的图像的 ClientBundle，GWT 会自动创建组合图像，并提供一个实现用于访问每个单独图像的接口。不再需要对服务器进行每次图像的往返操作，只需对组合图像进行一次往返操作。

由于组合图像的文件名基于文件内容的哈希，因此只有在组合图像发生更改时，文件名才会更改。这意味着客户端可以永久缓存组合图像，从而避免对未更改图像进行不必要的新鲜度检查。为了使此工作，服务器配置需要指定组合图像永不过期。除了加快启动速度外，图像捆绑还可以防止浏览器中图像加载的“弹跳”效果。在加载图像时，浏览器会在 UI 中为每个图像放置一个标准占位符。占位符是一个标准大小，因为浏览器在从服务器完全下载图像之前不知道图像的大小。结果是一个“弹跳”效果，图像在下载后“弹出”到 UI 中。使用图像捆绑，捆绑中每个单独图像的大小在创建捆绑时就会被发现，因此，只要在应用程序中使用捆绑中的图像，就可以明确设置图像的大小。

有关重要信息，请参见 ImageBundle API 文档。

• JVM 某些版本上生成组合图像时存在的潜在安全问题
• 有关图像捆绑文件缓存的建议
• 使用 Web 应用程序安全约束保护图像捆绑文件
• 使用图像捆绑与 HTTPS 协议