GWT javascript后台加载答案

【问题标题】：GWT javascript background loadingGWT javascript后台加载
【发布时间】：2012-02-17 12:50:25
【问题描述】：

我使用 GWT 构建移动 web 应用程序。

当我在具有移动互联网连接的移动浏览器上调用应用程序时，加载由 GWT 生成的 javascript 需要很长时间。

所以，我想改变它，我首先向客户端发送一个 Start HTML 页面并在后台加载 GWT-javascript。

这可能吗？

【问题讨论】：

【解决方案1】：

我认为你应该拆分你的代码，你可以在这里找到它：Developer's Guide - Code Splitting。
如果您有大型应用程序，则必须使用它，否则整个应用程序（即 javascript 包）会在应用程序的初始加载时以一个块的形式下载。它可以帮助您减少初始代码下载。查看代码拆分后的结果：

【讨论】：

您还可以告诉应用程序预加载下一个片段，甚至在您的用户决定继续通过开始屏幕之前。 GWT 开发人员指南有示例。

【解决方案2】：

我不太了解移动应用，但在 GWT 应用中，javascript 被加载到脚本标记内的 html 页面中：

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript" src="application/application.nocache.js"></script>

如果您希望在 javascript 加载完成之前显示任何内容，只需将其作为 html 放在该页面上即可。示例：

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body>

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
  <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
    Your web browser must have JavaScript enabled
    in order for this application to display correctly.
  </div>
</noscript>

<!-- Loading indicator -->
<div id="loading">
  <div class="loading-indicator">
  <img src="images/loadingStar.gif" width="40" height="40" />Application Name<br />
<span id="loading-msg">Loading...</span></div>
</div>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript" src="application/application.nocache.js"></script>

这里，一个 div 标签在页面上放置一个加载 gif，直到所有 gwt javascript 加载完毕。在加载 javascript 之前，您可以在该页面上放置您想要的任何内容。

然后在您的应用程序中，（在模块加载时）将根面板的内容替换为您的应用程序！

【讨论】：

我的做法与您在回答中提到的相同。但问题仍然存在。问题是加载图标早先在 onModuleLoad() 上被删除，但我的网站页面在 5-6 秒页面显示后变为空白。我已经使用了代码拆分技术，但问题仍然存在。你能帮助我吗？网址是enggheads.com你可以去看看

【解决方案3】：

有两件事要做：

加速初始页面的加载：将<script>放在HTML页面的底部。
如果 GWT 代码很大，那么您可以将其拆分为更小的块并按需加载。如果您使用GWT code splitting，这会自动发生。

【讨论】：