Problems in moving from Development mode to Production mode

无人久伴 提交于 2020-06-29 04:07:47

问题


I have an Angular application which I serve from Play Framework. To do this, the index.html of Play loaded the Angular js files like follows

<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>

I am facing some issues thought

1) When Angular application is build using --prod option then random hash are generated which makes it difficult to load the files

chunk {scripts} scripts.1196131972f9e08fb745.js (scripts) 436 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.de03edbe3c68408ee838.css (styles) 81 kB [initial] [rendered]
chunk {2} polyfills.b8f7e61d338890408fef.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} main.9fa6e6b934297d0ef934.js (main) 2.01 MB [initial] [rendered]

There is a reason to have these hash strings in the filenames and I would like to keep it this way. But how can I then load files? I can avoid the random hashstrings using --output-hashing none option but I'll prefer not to (https://github.com/angular/angular-cli/issues/3769).

Question 2)

The no. of bundles generated is also different. It seems --prod doesn't generate styles.js and vendor.js. I found that in package.json, the value of "vendorChunk" is false in production configurations. I don't want to fiddle with it as this is probably what is intented in Angular.

Why are these not generated and what is the workaround of referring these in my index.html (I don't want to keep changing index.html to include files based on production or dev mode)?

Question 3 - The css styles are missing. I read that "In development build global styles are extracted to .js files whereas with production build they are extracted to .css files.". I can use --extract-css false but I don't want to use it if I shouldn't.

In summary, I can make my production code work by running this command "build-prod": "ng build --prod --extract-css false --output-hashing none --output-path ../public/ui", and by changing "vendorChunk": to true in angular.json, are there any drawback in doing so?

If I don't want to do these changes, how can I make index.html dynamic so that it pics and excludes the right files.

来源:https://stackoverflow.com/questions/62269386/problems-in-moving-from-development-mode-to-production-mode

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!