GWT cache.js слишком большой - требуется время, чтобы приложение появилось

Question

Мы используем инфраструктуру JBoss Errai поверх GWT для создания веб-приложений. Проблема, которую мы имеем, состоит в том, что скомпилированная версия приложения имеет размер около 10 мегабайт уже при компиляции с оптимизацией.

Есть ли способ для приложения GWT/Errai разделить или каким-либо образом показать начальные страницы еще до загрузки файла cache.js?

Answer 1

Я столкнулся с той же проблемой. Мое приложение было 8Mo большого размера, и мне удалось уменьшить его до 800ko, изменив одну из опций компиляции GWT: стиль вывода с подробного на запутанный.

Answer 2

Вы можете использовать механизм разделения кода.

Чтобы разделить ваш код, просто вставьте вызов метода GWT.runAsync в тех местах, где вы хотите, чтобы программа могла сделать паузу для загрузки большего количества кода. Эти места называются точками разделения.

Например:

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);
  }
}

... изначально загруженный код не содержит строку "Hello, AJAX" и код, необходимый для реализации Window.alert. Как только кнопка нажата, вызов GWT.runAsync будет достигнут, и этот код начнет загрузку. При условии успешной загрузки будет вызван метод onSuccess; после загрузки необходимого кода этот вызов будет выполнен успешно. В случае сбоя при загрузке кода будет вызвано onFailure.

Подробную информацию вы найдете в документации: http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html

Answer 3

Если вы не хотите использовать точки разделения для фактического уменьшения начального размера полезной нагрузки, вы можете показать экран загрузки в начале, чтобы пользователь знал, по крайней мере, о том, что приложение запускается.

Это может быть легко сделано:

• добавив div отображение анимации загрузки ( пример) на вашей странице хоста
• div должны быть добавлены до вашего <script type="text/javascript" src="app.nochache.js"></script> тег
• дать это div идентификатор, напр.: loading-icon
• в onModuleLoad метод, после *.cache.js был загружен, удалите div, установив его в display:none; и / или удалив его из DOM