I'm working on a very old website which is using AngularJS. The plan is to migrate it slowly to Angular, however it will be very long process. As it's not a SPA but rather Website with some AngularJS Controllers, I decided to use Angular Elements. In this way I can replace Component by Component (Or rather Controller to Component).
There are some pages where non of the new Angular Elements are available but the scripts is part of the main js bundle. Based on the Lighthouse Performance review (I'm using Chrome Extension of Lighthouse) the website Performance is really bad and I'm trying to improve it. However there are many scripts and the Execution time is just ridiculous.
Anyway let's come back to the source of my question. As I mentioned there are some pages where non Angular Elements are available but the scripts for them is on the page. On those pages I'm getting performance around 30-38 with Lighthouse. If I remove the Angular bundle (runtime.js, main.js and scripts.js)(I'm leaving the polyfills.js) the Performance is jumping to 48. Which is a huge difference. Especially when non of those scripts have to be executed.
From the Lighthouse report with all scripts I can see that polyfill.js is taking a lot of time to execute. After some research (angular-cli polyfill bundle issue) I found that the reason why it showing it as polyfill is because of zone.js. But why the hell after removing the Angular scripts(runtime.js, main.js and scripts.js) I'm not getting the same outcome when the polyfills and zone.js are still on the page?
Wanted to check if anyone else have experience similar issue and if you have suggestions what can I do to improve it?
Result without Angular bundle:
Result with Angular bundle:
