Angular 2 slow initialization for non SPA sites

Question

we are evaluating Angular 2 for a project and I noticed some point on which I need clarification whether this is an Angular issue or if I'm using Angular wrong.

We are replacing parts of static pages with Angular to enhance the user experience. Since the elements replaced can be at arbitrary positions on the page we cannot bootstrap a single Angular app (Components are not tree like in DOM and we need the legacy templating). We aren't using any of Angulars routing also.

So first question would be if Angular is the right technology for non-SPA sites. To just build 'widgets'.

Second question is about performance. If you have a non-SPA page you cannot omit page reloads. Everytime the page reloads, Angular has to be initialized again. The good part here is, instantiating multiple root components doesn't increase the bootstrap significantly, so thats a plus. Bad thing though is, if I use the configuration from the Quickstart tutorial, I takes about 1.7s to initialize the app and the components to appear, with a lot of the time attributed to system.js, the class loader. Changing this to webpack and precompiling everything it still takes 300-400ms for the components to appear. This page has a very similar bootstrap to my components.

Can this be optimized further (let's say <130ms) or should I look for another technology (e.g. React), since it's not in Angular's scope to be used in non-SPA pages.

Cheers

Tom

Answer 1

You can get much more optimized to the < 130ms mark. I'm currently working on an app that is hybrid(some pages are static server rendered, others contain Angular widgets including routing) and we are getting very fast load/render times. We are using AOT and our app bundles for each widget are ~50kb. I'm using webpack and outputting a single polyfills and single vendor bundle that loads on the original layout and gets cached. This way each page just needs to pull down the app bundle for whatever Angular widget that page contains. AOT makes a world of difference. Also, make sure you've structured your apps to tree-shake well, ie not loading the entire RxJS library, but only the operators you need. Also, beware how your structure your barrels as it can cause unneeded code to not be tree-shaked.