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 a
Gwt.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.
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.