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?

score 3 · Accepted Answer · answered Feb 27 '17 at 08:50

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

I'm actually looking for something that would work for Errai — quarks, Feb 27 '17 at 08:53
It's unlikely that you'll find something specific to Errai (because it's pretty un-popular), but code splitting, as was mentioned is a base GWT mechanism, and is addressing your exact kind of problem; so you have a good chance that it will work for you (unless Errai does something to specifically make you avoid using Code Splitting) — Andrei, Feb 27 '17 at 10:42
I wouldn't say Errai is unpopular, I've heard good things about it. Not knowing Errai, I can't help though (and would agree that Errai artificially contributes to the bloat by generating some code that's hard/impossible to optimize for the GWT compiler; likely depends what Errai features you're using though) — Thomas Broyer, Feb 27 '17 at 19:09

score 3 · Answer 2 · answered May 07 '18 at 20:51

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.

answered May 07 '18 at 20:51

Antonio

51
2

score 2 · Answer 3 · answered Feb 27 '17 at 09:13

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

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

3 Answers3