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

Question

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?

Answer 1

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

Answer 2

If you dont want to use split points to actually reduce the initial payload size, you could show some loading screen at the beginning, so the user knows at least that the app is starting.

That can be easily done by:

• adding a div showing some loading animation(example) to your hostpage
• the div should be added before your <script type="text/javascript" src="app.nochache.js"></script> tag
• give that div an id, ex.: loading-icon
• in the onModuleLoad method, after the *.cache.js has been loaded, remove the div by setting it to display:none; and/or removing it from the DOM

Answer 3

I faced the same issue. My app was 8Mo large and I managed to reduce it to 800ko by changing one of the GWT compilation option : Output style from Detailed to Obfuscated.