ClientBundles and code splitting in GWT?

Question

I have a ClientBundle, which defines a bunch of TextResource and ImageResource elements.

For each page on my site, I plan to set up a code split point, which will run the views / presenters for that given page only.

My question is, say I have an ImageResource called logo(), and a text resource called fooJs(). I only access MyClientBundle.INSTANCE.logo() and MyClientBundle.INSTANCE.fooJs()from aGwt.runAsync` block.

Other pages will access MyClientBundle.INSTANCE to load other images / textResources, which are specific to those pages (within GWT.runAsync blocks of their own). But logo() and fooJs will only be referred to within one code split.

My question is, will the logo image and fooJs textResource only be bundled within the code split file, or will they be added to the startup js, or to the left over fragments?

Essentially what I'm trying to do is split the images / views / presenters for every page, to reduce initial download size of the script.

John Haynes John Haynes · Accepted Answer · 2014-09-08T20:01:18

It looks like the GWT compiler will split up the individual resources in a ClientBundle.

Consider the following module:

public class ClientBundleCodeSplittingExample implements EntryPoint {

  public interface MyResources extends ClientBundle {
    public static final MyResources INSTANCE = GWT.create(MyResources.class);

    @ClientBundle.Source("resource1.txt")
    public TextResource resource1();

    @ClientBundle.Source("resource2.txt")
    public TextResource resource2();
  }

  /**
   * This is the entry point method.
   */
  public void onModuleLoad() {
    Window.alert("Resource 1: " + MyResources.INSTANCE.resource1().getText());

    GWT.runAsync(new RunAsyncCallback() {
      @Override
      public void onFailure(Throwable throwable) {
        Window.alert("Code download failed");
      }

      @Override
      public void onSuccess() {
        Window.alert("Resource 2: " + MyResources.INSTANCE.resource2().getText());
      }
    });
  }
}

With 2 text files named resource1.txt and resource2.txt in the same package as the module entry point class with different and easily identifiable strings as the content of the text file. If you compile your module with the option -style PRETTY and inspect the javascript that was generated, you can see that the contents of resource1.txt are included in the main module javascript and the contents of resource2.txt were only included in the javascript that will be loaded deferred.

ClientBundles and code splitting in GWT?

1 Answers