Question

我必须在我的项目中使用代码分割。但无论如何，首次有一些初始下载的代码。

现在我想向最终用户展示代码下载（.cache.html - 或其他代码分割）的进度，例如gmail启动进度。

请你帮帮我。

RGDS

Answer 1

根据design（粗略地），它提到将模块分开，因为它在技术上不支持预取;话虽如此，我只能假设GMail根据通过回调检查的模块加载进度（即GWT.runAsync()）显示进度。并非所有模块都具有相同的大小，但您可以“猜测”并为每个模块分配加权百分比（请参阅GWT的compile report）

如果您的初始页面大小下载很大（> = 1 MB），我建议您考虑重构并优化您的设计，使其更轻一些（脚手架）。这意味着更多的访问服务器，但限制初始下载大小。这将为向用户提供一些更精确的反馈提供基础，即页面处于“工作”状态（即不确定的进度条）并避免不必要的精确度。
总页面大小对于真正测量到客户端/浏览器的途径来说是一件困难的事情，将它显示给用户会比将其显示更麻烦。可能可能通过几个轻量级模块完成此任务，但您必须补偿所有生成的资源，如ClientBundle，因为GWT会为每个浏览器排列创建一个特定的集合。
< / LI>
<强>旁注：当将文件（例如图像，视频，音乐等）下载到用户的硬盘驱动器时，通常使用诸如文件大小精确进度的实时反馈（例如，80 KB的1.29MB（6％完成））。此时的数据不再是短暂的，存储空间可能是一个问题，缓存清除和刷新，因此网页的大小通常不是什么大问题。

Answer 2

也许你可以尝试这个，请评论它是否有效;

我只会向你发送html文件。你可以根据你的代码进行设计。这是怎么回事。有一个包含“加载”的div元素。当页面第一个加载简单的html时，将显示加载文本。加载html文件后，你的nocache.js文件将启动（仍然是你看到的loaidng文本）。在js文件加载后，onmoduleload脚本将启动（仍然显示文本加载）并且在创建所有窗口小部件并准备好面板等之后。尝试以下代码并从屏幕中删除“加载”文字;

com.google.gwt.user.client.Element loading = DOM.getElementById("loading");
DOM.removeChild(RootPanel.getBodyElement(), loading);

proje.html;

 <!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="<proje>.css">
    <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title><Proje></title>

    <!--                                           -->
    <!-- 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="<proje>/<proje>.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- 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">

      </div>
    </noscript>

    <div align="center" id="loading"> 
        <table style="height:600px;" border="0">
            <tr height="100%">
                <td align="center">
                    <b>Loading...</b>
                </td>
            </tr>
        </table>
    </div>

    <div id="main" style="display:none">
       <table border="0" width="100%" height="100%" align="center" cellspacing="0">
              <tr>
                <td colspan="2" width="100%" id="ustMenuPanel"></td>
              </tr>
              <tr height="100%" valign="top">
                <td id="menuPanel" width="20%"></td>
                <td id="modulPanel" width="80%"></td>
              </tr>
        </table>
    </div>
  </body>
</html>

Answer 3

GWT没有像进度条这样的小部件。我还想将此功能添加到我的应用程序中，但我无法

您可以使用孵化器进度条。

http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/ProgressBar/index.html

Answer 4

你可以使用与Apache Hupa相同的方法，它只是在加载应用程序时显示动画gif。加载应用程序后，它会通过主页的dom结构删除动画gif。

GWT代码拆分下载进度条 - 就像gmail一样

4 个答案: