Angular 2初始加载进度 [英] Angular 2 Initial loading progress
问题描述
我已尽力减少Angular 2的捆绑包大小，并已成功使用Browserify +将Angular 2的捆绑包大小减小至〜300kb(Angular 2 + jquery + bootstrap +一些其他小型第三方库) Rollup + Minify + GZIP，但是即使具有此大小，下载捆绑包仍需要一段时间，然后还要考虑反射和zone.js的初始加载时间，这意味着它可能需要花费最多的时间.在速度较慢的设备(手机)上加载4-5秒即可加载网站.
I've tried my best to bring the bundle size of Angular 2 down and have been relatively successful in reducing the size to ~300kb (Angular 2 + jquery + bootstrap + some other small third party libraries) using Browserify+Rollup+Minify+GZIP but even with this size, it still takes a while to download the bundle and then there's the initial loading time for reflect and zone.js to take into consideration, meaning it can take up to 4-5 seconds on slower devices (mobile phones) to load up the site.
虽然我知道这是不可避免的(至少现在是这样)，但有没有办法以下载+反射/zone.js初始化的百分比来显示初始加载的加载进度?
Whilst I understand that this is unavoidable (for now at least), is there a way to show the loading progress for the initial load in terms of percentage of download + reflect/zone.js initialization?
大多数示例如下:
<body>
<my-app>Loading...</my-app>
</body>
哪个可以工作，并且Loading...可以用微调器或任何可能选择的自定义模板代替，但是有什么方法可以有意义的方式获得实际进度?
Which is working and the Loading... can be replaced by a spinner or whatever custom template one might choose but is there any way to get the actual progress in a meaningful way?
我正在寻找的是类似Gmail的加载进度，它是带有最小/最大值的实际进度条，而不是一些不确定的微调器，以便用户可以以某种形式指示他们需要多长时间等待网站加载.
What I'm looking for is something like Gmail's loading progress which is an actual progress bar with min/max and not some indeterminate spinner so that users can have some form of indication as to how long they will need to wait for the site to load.
在此先感谢
更新(2016年10月24日)
我已经开始使用NGC进行提前编译( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html )加快了速度(尽管压缩包的大小已增加到约500kb)，但仍然需要一切下载完毕后，大约需要300毫秒才能加载网站.
I have started using NGC for ahead-of-time compiling (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) which has sped things up quite a bit (albeit bundle size has increased to ~500kb zipped) but it still takes ~300ms to load the website after everything has been downloaded.
理想情况下，我希望能够拦截下载和加载过程，调查它们的状态(例如，下载230kb/500kb或完成模块构建的10％)，然后加载进度栏和状态栏实际上，这可以向用户指示他们到底在等待什么.
Ideally, I would like to be able to intercept both the download and the loading process, investigate their status (for instance, 230kb/500kb downloaded or 10% of module building complete) and then load a progress bar and a status bar that actually gives some indication to the user what exactly they're waiting for.
我目前所要做的是为进度条加载最小的CSS，显示它，然后按顺序在onLoad函数上加载所有有角度的东西，虽然它比以前平滑得多，但仍然不清楚要花多长时间用户将不得不等待-半秒钟到几秒钟，具体取决于互联网连接和设备的功能.
What I currently have is to load a minimum CSS for a progress bar, show it and then load all the angular things in order on the onLoad function and whilst it's a lot smoother than before, it's still not obvious how long the user will have to wait - be that half a second to a few seconds depending on the internet connection and the device's capabilities.
推荐答案
您还可以执行其他一些操作来减少静态资源的加载时间.
Here are some other things that you can do to reduce the loading time of the static resources.
- 尝试使用CDN支持的托管解决方案，例如firebase托管- https://firebase.google.com/docs/hosting
- 使您的应用成为渐进式Web应用.渐进式Web应用程序使用服务工作者在用户设备中缓存静态资源，因此仅当发布了新版本的应用程序时，才需要更新它们-
- Try a hosting solution supported by CDN such as firebase hosting - https://firebase.google.com/docs/hosting
- Make your app a progressive web app. Progressive web apps uses service workers to cache the static resources inside user's device, so they needs to be update only when a new version of your application has been released - https://angular.io/guide/service-worker-getting-started
这篇关于Angular 2初始加载进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
