GWT cache.js too big -- take time for the app to show up

We are using JBoss Errai framework on top of GWT to build web applications. The problem we are having is that the compiled version of the app is about 10 Megabytes in size already when compiled with optimizations.

Is there a way for an GWT/Errai app to split or somehow show up the initial pages even before the while cache.js file is loaded?

Solution

You can use Code Splitting mechanism.

To split your code, simply insert calls to the method GWT.runAsync at the places where you want the program to be able to pause for downloading more code. These locations are called split points.

For example:

public class Hello implements EntryPoint {
  public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
      public void onClick(ClickEvent event) {
        GWT.runAsync(new RunAsyncCallback() {
          public void onFailure(Throwable caught) {
            Window.alert("Code download failed");
          }

          public void onSuccess() {
            Window.alert("Hello, AJAX");
          }
        });
      }
    });

    RootPanel.get().add(b);
  }
}

... the code initially downloaded does not include the string "Hello, AJAX" nor any code necessary to implement Window.alert. Once the button is clicked, the call to GWT.runAsync will be reached, and that code will start downloading. Assuming it downloads successfully, the onSuccess method will be called; since the necessary code has downloaded, that call will succeed. If there is a failure to download the code, then onFailure will be invoked.

You will find detailed information in documentation: http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html