79454647

Date: 2025-02-20 13:25:49
Score: 1.5
Natty:
Report link

I found the question following a hint from other question - https://stackoverflow.com/a/78437730/2779773

The main idea is to track resources loading process using PerformanceObserver. There are some complications:

  1. We don't need to track ALL the resources since not all of them are crucial for app initialization. In ideal world we could use bundle analyzer to collect list of critical resources and then use this list to filter resources in observer, but currently I don't see any way to accomplish this, so we can just use some regexp to filter a short amount of resources that we find critical - for angular 14 it's main, polyfills, scripts, runtime, vendor and styles. This approach needs tweaking for other versions of Angular or other frameworks
  2. If we want to track the whole loading process we should also track sizes of files - total size and downloaded size. In order to do this we use transferSize. Cached resources have zero transferSize, so we use decodedBodySize
  3. In order to track errors we can use duration property of entry - if resource failed to load the entry will have zero duration
  4. If some critical resources failed to load then we refresh the page and hope that this time it will load successfully
  5. We don't want our user to fall into neverending page refresh abyss, so upon refresh we should somehow preserve a number of current refresh attempt - via LocalStorage or URL params, increase it with any refresh, and then prohibit page refresh if amount of refresh attempts reached a maximum
  6. Resources tracking process should be finished either upon loading all critical resources, or upon successfull app initialization. If we choose the second way we should send an appropriate event from angular to parent page, from AppComponent or from APP_INITIALIZER

Later I'll post the final code

Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Long answer (-1):
  • No code block (0.5):
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: lucifer63