Angular 2 slow initialization for non-SPA sites

Question

we are evaluating Angular 2 for a project, and I noticed some point where I need to clarify if this is an Angular problem or if I am using Angular incorrectly.

We replace parts of static Angular pages to improve user experience. Since replaced elements can be in arbitrary positions on the page, we cannot load one Angular application (components are not a tree, as in the DOM, and we need outdated templates). We also do not use corner routing.

So, the first question will be if Angular is the right technology for non-SPA sites. Just create widgets.

The second question is about performance. If you have a page without SPA, you cannot omit page reloading. Every time the page reloads, Angular needs to be initialized again. A good role here is that creating multiple root components does not increase the load significantly, so that's a plus. The bad thing though, if I use the configuration from the Quickstart tutorial , I take about 1.7 to initialize the applications and components that appear, with a lot of time attributed to system.js, to the class loader. By changing this to webpack and precompiling everything, components still require 300-400 ms. This page has a very similar download for my components.

Can this be optimized further (say 130 ms) or should I look for another technology (for example, React), since it is not in the Angular area and is not used for pages that are not related to SPA.

Greetings

Tom

Answer 1

You can get much more optimized for <130 ms mark. I am currently working on a hybrid (some pages are a static server, others contain Angular widgets, including routing), and we get very fast load / render times. We use AOT, and our application packages for each widget are ~ 50 kb. I use webpack and output one set of polyps and one provider, which is loaded onto the original layout and gets cached. Thus, each page just needs to pull out the application package for any Angular widget that this page contains. AOT makes the world a difference. Also, make sure that you have properly structured your tree embedding applications, i.e. Do not load the entire RxJS library, but only the required operators. Also, beware how your barrel structure is, as this may result in unnecessary code not breaking down the tree.