Angular 角2初始加载进度_Angular

Angular 角2初始加载进度

angular

Angular 角2初始加载进度,angular,Angular,我已经尽了最大努力降低Angular 2的捆绑包大小，并使用Browserify+Rollup+Minify+GZIP将其大小相对成功地减小到约300kb（Angular 2+jquery+bootstrap+一些其他小型第三方库），下载捆绑包仍然需要一段时间，然后需要考虑reflect和zone.js的初始加载时间，这意味着在速度较慢的设备（手机）上加载站点最多需要4-5秒虽然我知道这是不可避免的（至少现在是这样），但有没有办法以下载+反射/zone.js初始化的百分比来显示初始加载的加载进

我已经尽了最大努力降低Angular 2的捆绑包大小，并使用

Browserify

Rollup

Minify

GZIP

将其大小相对成功地减小到约300kb（Angular 2+jquery+bootstrap+一些其他小型第三方库），下载捆绑包仍然需要一段时间，然后需要考虑reflect和zone.js的初始加载时间，这意味着在速度较慢的设备（手机）上加载站点最多需要4-5秒

虽然我知道这是不可避免的（至少现在是这样），但有没有办法以下载+反射/zone.js初始化的百分比来显示初始加载的加载进度

大多数例子如下所示：

<body>
   <my-app>Loading...</my-app>
</body>


加载。。。

哪个正在工作，

加载…

可以用微调器或任何自定义模板替换，但是有没有办法以有意义的方式获得实际进度

我要找的是类似于Gmail的加载进度，这是一个实际的进度条，带有最小/最大值，而不是一些不确定的微调器，这样用户就可以有某种形式的指示，表明他们需要等待站点加载多长时间

多谢各位

更新（2016年10月24日）

我已经开始使用

NGC

进行提前编译（），这大大加快了速度（尽管包大小已增加到~500kb压缩），但在下载完所有内容后，仍然需要~300ms才能加载网站

理想情况下，我希望能够截获下载和加载过程，调查它们的状态（例如，下载230kb/500kb或模块构建完成的10%），然后加载一个进度条和一个状态条，该进度条和状态条实际上会向用户显示他们在等待什么

我现在要做的是为进度条加载一个最小CSS，显示它，然后在

onLoad

函数中按顺序加载所有角度的东西，虽然它比以前平滑得多，现在还不清楚用户需要等待多长时间，可能是半秒到几秒，这取决于互联网连接和设备的性能。

我不确定reflect/zone.js，但下载时我们可以遵循这一点

<body onload="showApp()">
    <div class="progress-bar" id="loadingContainer"></div>
    <my-app style="display: none"><my-app>
</body>

showApp() {
    document.getElementById('loadingContainer').style.display = "none";
    document.getElementsByTagName('my-app')[0].style.display = null;
}


showApp（）{
document.getElementById（'loadingContainer'）.style.display=“无”；
document.getElementsByTagName（'my-app'）[0].style.display=null；
}

您可以尝试在

index.html

中添加第二个脚本，然后加载所有其他文件（就像

index.html

现在所做的那样）。

然后，您将有一堆AJAX文件请求，并可以将它们添加到DOM中。要跟踪进度，您可以尝试使用HTTP HEAD请求和

内容长度

头。

以下是一些可以减少静态资源加载时间的其他方法

尝试CDN支持的托管解决方案，如firebase托管-
使你的应用程序成为一个进步的web应用程序。Progressive web apps使用服务工作者缓存用户设备中的静态资源，因此只有在发布应用程序的新版本时，才需要更新这些资源-

使用引导时，引导有一个问题，即它会阻止主渲染线程。从开发者工具运行lighthouse，看看这是否是您的问题

你可以尝试从源头上减少它，或者只使用你真正需要的东西

好问题，但我认为通用解决方案（您可能使用汇总，其他人可能使用webpack等）很棘手？可能需要一些帮助/api/hook才能让它工作。您尝试过AOT编译吗？（用于速度优化）@redaigbaria我有。它肯定更快，但还是希望在较慢的设备上有一个进度条，在2秒钟左右的时间内具有有意义的状态。看起来您必须手动加载脚本才能显示实际进度：您是否尝试过SSR（服务器端渲染）？