title: How to monitor an angular 2 & webpack app for performance issues
body: <p>I am working on an app, which was initially written in angular 1. We have migrated most of it to angular2, but some ng1 flows are still there.</p>
  
  <p>The app works fine in chrome but when I navigate from ng1 screen to ng2 dashboard, the app freezes in Firefox for a considerable amount of time.</p>
  
  <p>I am trying to monitor it in profiler of both chrome and firefox but was not able to make much sense from the logs generated. The problem is that as the application is written in angular and bundled by webpack, whatever I see in call stack and flame chart is something related to the angular library or the browser engine. </p>
  
  <p>In chrome, the same flow renders in 13 seconds but Firefox takes more than 51 seconds. </p>
  
  <p>I have been through many blogs and tools, can't really find anything that helps me with what's causing the issue.</p>
  
  <p><strong>Profiler snapshot for chrome</strong>
  <a href="https://i.stack.imgur.com/MLQ7y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MLQ7y.png" alt="Profiler snapshot for Chrome"></a></p>
  
  <hr>
  
  <p><strong>Profile snapshot for Firefox</strong></p>
  
  <p>Please notice the selected line in the snapshot, this file is taking most of the time. but I can't figure how to proceed from here. 
  <a href="https://i.stack.imgur.com/nqbVi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nqbVi.png" alt="Profiler snapshot for Firefox"></a></p>