Angular 2 slow initialization for non SPA sites
<p>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.</p>
<p>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.</p>
<p>So first question would be if Angular is the right technology for non-SPA sites. To just build 'widgets'.</p>
<p>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 <a href="https://angular.io/docs/js/latest/quickstart" rel="noreferrer" title="Quickstart tutorial">Quickstart tutorial</a>, 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. <a href="https://captain-codeman.appspot.com/" rel="noreferrer" title="Example page">This</a> page has a very similar bootstrap to my components.</p>
<p>Can this be optimized further (let's say &lt;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.</p>
<p>Cheers</p>
<p>Tom</p>