我已经尽力将Angular 2的捆绑大小降低,并且使用Browserify+ Rollup+ Minify+ 将大小减小到~300kb(Angular 2 + jquery + bootstrap +其他一些小型第三方库)相对成功GZIP但是即便如此大小,下载捆绑包仍然需要一段时间,然后考虑到反射和zone.js的初始加载时间,这意味着在较慢的设备(手机)上加载时间可能需要4-5秒现场.
虽然我知道这是不可避免的(至少现在),有没有办法用下载百分比+ reflect/zone.js初始化来显示初始加载的加载进度？
大多数例子都是这样的:
<body>
<my-app>Loading...</my-app>
</body>
哪个工作正常,Loading...可以用微调器或任何可能选择的自定义模板替换,但有没有办法以有意义的方式获得实际进度？
我正在寻找的是类似于Gmail加载进度,这是一个具有最小/最大值的实际进度条而不是一些不确定的微调器,以便用户可以获得某种形式的指示,指示他们需要等待网站的时间长度加载.
提前谢谢了,
更新(2016年10月24日)
我已经开始使用NGC提前编译(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html),它已经加快了相应的速度(虽然捆绑大小增加到〜 500kb压缩)但是在下载完所有内容后仍然需要大约300ms来加载网站.
理想情况下,我希望能够拦截下载和加载过程,调查它们的状态(例如,下载230kb/500kb或完成模块构建的10%),然后加载进度条和实际给出的状态栏向用户指示他们究竟在等什么.
我目前所拥有的是为进度条加载最小的CSS,显示它然后在onLoad函数上按顺序加载所有有角度的东西,虽然它比以前更平滑,但用户必须等待多长时间仍然不明显 - 根据互联网连接和设备的功能,是半秒到几秒.
小智 0
我不确定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;
}
| 归档时间： |
|
| 查看次数： |
1414 次 |
| 最近记录： |