optimization - ClientBundle 图像资源的 GWT 代码拆分模式

Question

在我的 GWT 大型项目中，我的图像资源有一个 ClientBundle。我在里面定义了大约 40 个 GIF 文件。 (每个文件大小约5KB)

然后我创建一个带有静态方法的类，将正确的图像设置为作为参数获取的 obj:

 public static void setImageFromId (String id,final Image img) {

    //for 1.gif
    if (id.equals("1")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img1()); //MyImages is the ClientBundle
            }
        });
    }             

 }

    //for 2.gif
    if (id.equals("2")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img2()); //MyImages is the ClientBundle
            }
        });
    }             

   //etc. for other images 3, 4, 5, ...
   //...

 }

我想知道代码拆分的好模式吗？因为如果我不这样做，所有 40 个文件将在第一次调用时缓存到客户端浏览器，但这不是必需的。

RGDS

Answer 1

因此，您试图避免在页面加载时下载每个图像。这很好，如果您不提前知道是否需要每个图像。

但是，您的代码所做的是使用代码拆分仅在需要图像时下载代码以显示图像，如您所见，每个图像只有一行代码。

试试这个代码:

if (id.equals("1")) {
  img.setSrc(MyImages.INSTANCE.img1().getUrl());
} else if (id.equals("2")) {
  //.. and so on.
}

只有在需要相关图像时才会下载和显示您的图像。您可以使用 Firebug或 Chrome's Developer Tools要查看您的图像何时被下载，应仅在需要时请求它们。

如果您有任何其他问题或发现您的所有图片都在页面加载时被下载，请告诉我，我会再次编辑我的答案以帮助您。