Angular 2 初始加载进度答案

【问题标题】：Angular 2 Initial loading progressAngular 2 初始加载进度
【发布时间】：2021-07-23 16:37:59
【问题描述】：

我已尽最大努力减小 Angular 2 的包大小，并且使用 Browserify+ 将大小减小到 ~300kb（Angular 2 + jquery + bootstrap + 一些其他小型第三方库）相对成功Rollup+Minify+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），但仍然需要 ~300 毫秒才能加载下载完所有内容后的网站。

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

我目前要做的是为进度条加载一个最小的 CSS，显示它，然后在 onLoad 函数上按顺序加载所有有角度的东西，虽然它比以前平滑了很多，但仍然不清楚多长时间用户将不得不等待 - 半秒到几秒，具体取决于互联网连接和设备的功能。

【问题讨论】：

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

标签： angular

【解决方案1】：

您可以采取其他一些措施来减少静态资源的加载时间。

尝试使用 CDN 支持的托管解决方案，例如 firebase 托管 - https://firebase.google.com/docs/hosting
让您的应用程序成为渐进式网络应用程序。渐进式 Web 应用程序使用 service worker 缓存用户设备内的静态资源，因此只有在您的应用程序的新版本发布时才需要更新它们 - https://angular.io/guide/service-worker-getting-started

【讨论】：

【解决方案2】：

您可以尝试在index.html 中添加第二个脚本，然后加载所有其他文件（就像index.html 现在所做的那样）。然后你会有一堆对你的文件的 AJAX 请求，并且可以将它们添加到 DOM。要跟踪进度，您可以尝试使用带有 Content-Length 标头的 HTTP HEAD 请求。

【讨论】：

【解决方案3】：

当你使用 bootstrap 时，bootstrap 存在阻塞主渲染线程的问题。从开发人员工具中运行 lighthouse，看看这是否是您的问题。

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

https://getbootstrap.com/docs/4.0/getting-started/contents/#bootstrap-source-code

【讨论】：

【解决方案4】：

我不确定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;
    }

【讨论】：