Comments on: The Complete Guide To Angular Load Time Optimization

By: Mihai-Alexandru Iordache

Mihai-Alexandru Iordache — Wed, 02 Dec 2020 17:20:00 +0000

Hello Christian,

I would like to ask you a question about an issue I’ve encountered recently. Currently I’m working on a project that is build in Angular 8, but some of the features are written in react by a 3rd party. In order to render those react components inside our angular space, the vendor exposed their API on window, and from there i access it within angular services using syntax declare var vendorApi: any;.
Everything works “well” locally, but when we boundle the app using ng build with some configurations specified in angular.json some of the lazy loaded modules are crashing.
We tried to load the 3rd party scripts in three different ways:
– added them in index.html
– added them in angular.json under scripts []
– load them dynamically when user click on a certain route, using a routeResolver (so before that modules which requires vendor’s stuff gets lazy loaded, scripts to be present in the browser)

With any of these approaches i’m getting an error related to webpack I think (something like. cannot read property “call” of undefined) from within bootstrapp.js | zone-evergreen.js.prebuild-optimizer.js.

Now, the last thing i’ve tried was to set vendorChunk: true and commonChunk: false in the angular.json file and it seems to almost work as before. Can you explain me how’s that? What’s the reason why now it’s working?
And performance wise what will be the impact of settings those values as described?

By: Leon Grin

Leon Grin — Fri, 21 Aug 2020 21:50:00 +0000

The highest opportunity for improvement Page Speed Insights keeps me warning is to implement the `crossorigin` attribute properly on js files. I don’t have a clue on how to fix this. This information is missing in this article. It’s a super important topic.

A preload was found for “https://…/runtime-es2015.10c38323de6d682b8415.js” but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

By: Guillermo Moran-Arreola

Guillermo Moran-Arreola — Mon, 16 Sep 2019 21:59:00 +0000

Immer ausgezeichnete Artikeln 🙂

By: Siscka

Siscka — Sun, 18 Aug 2019 14:23:00 +0000

This is great article even tho i’m still a bit confused.

How would you activate GTM only once our app has initially been loaded ?

By: James Randall

James Randall — Tue, 13 Aug 2019 14:14:00 +0000

Great article! I was hoping you might be able to clarify what you mean by having a “Main shared” module. I think I understand the basic principle, but in doing tests of my own here, I’m still seeing somewhat large bundle sizes within the “main” chunk.

Any help would be appreciated, thanks!

By: Christian Lydemann

Christian Lydemann — Sat, 10 Aug 2019 11:21:00 +0000

In reply to Hisham A.

It is basically the same, performance wise, as with a Node server for hosting. You still need to:
1. Download, parse and execute the server html
2. Download, parse and execute client bundles

The same trade-off will happen here:
– FCP will improve
– TTI will worsen

By: Christian Lydemann

Christian Lydemann — Sat, 10 Aug 2019 11:21:00 +0000

In reply to Dmitry. Just in the assets array :)

By: Christian Lydemann

Christian Lydemann — Sat, 10 Aug 2019 11:21:00 +0000

In reply to Lars Jeppesen. Thanks, glad you liked it :)

By: Lars Jeppesen

Lars Jeppesen — Fri, 09 Aug 2019 08:30:00 +0000

Very informative, thanks

By: Christian

Christian — Thu, 08 Aug 2019 19:29:40 +0000

In reply to Dmitry. Thanks! Just put it in the assets array.