angular-prerender creates huge HTML file with CSS and source map

Question

angular-prerender creates huge HTML file with CSS and source map

cschwaderer opened this issue 5 years ago · comments

In my Angular 8 project, when running ng build --prod
everything seems to work fine. I have sourceMap set to false in angular.json, and indeed no source map files are created. My styles... .css file is just 170kb large

However, after running npx angular-prerender, the result seems somewhat weird. My index.html is now 6,4mb large.
The content consists mainly of CSS.
While the <body> of this HTML page is quite small (18kb), the header is huge.
Namely, there are eight <style> tags all starting like <style ng-transition="serverApp">
Every <style> tag has a source map comment in base64 format starting like /*# sourceMappingURL=data:application/json;base64...
All these comments are in sum ca 5MB large.

The rest of the <head> is plain CSS (which somehow seem repetitive), so ca. 1.8MB

My questions are now:

Where do these source map comments come from? Why they are there when sourceMaps are turned off in angular.json?
Why is the CSS so huge anyway when the .css file created by ng build is actually very small?

Christoph Guttandin · Answer 1 · Wed Dec 11 2019 18:55:31 GMT+0800 (China Standard Time)

Hi @cschwaderer, thanks for reporting this.

From what I can tell all style tags with the server-transtition attribute are the ones which are referenced by the components of the current page. Is it possible that some of your components reference some other CSS files which do contain the large source map?

That's just a wild guess of course. Please let me know in case the project is publicly available somewhere. I'm happy to take a look.

Christoph Guttandin · Answer 2 · Thu Jan 16 2020 03:48:06 GMT+0800 (China Standard Time)

Hi @cschwaderer, could you determine what caused the problem?

cschwaderer · Answer 3 · Thu Jan 16 2020 13:58:18 GMT+0800 (China Standard Time)

@chrisguttandin Unfortunately not. At least not immediately and now I'm busy with different matters. This is still an open issue on my list, but not high priority right now.

Christoph Guttandin · Answer 4 · Thu Jan 16 2020 18:21:52 GMT+0800 (China Standard Time)

Thanks for the feedback. I will keep this issue open for another while. But I'm afraid there is not much I can do without an example project that reproduces the problem.

cschwaderer · Answer 5 · Mon Jan 27 2020 17:52:23 GMT+0800 (China Standard Time)

This issue can be closed.

The reason for the huge file was a CSS framework being imported into each component anew, thus creating huge files anyway. So, this has nothing to do with angular-prerender. Sorry.

Christoph Guttandin · Answer 6 · Mon Jan 27 2020 19:49:36 GMT+0800 (China Standard Time)

Thanks for double-checking this.