Using both AOT and JIT in production within an Angular 9 app

依然范特西╮ 提交于 2020-04-10 11:56:28

问题


So I have been building an Angular 9 app where there is a customer dashboard to manage their templates which are saved on the server. Those templates can be viewed on different devices through an activation system so the devices are bound to the user.

So lets say on https://templates.com we have /login, /dashboards, /manage with sub paths from viewing and editing data. On this url we also have /:companyName on this path it requests a template, that contains html with interpolation strings, but also css which will be loaded in on the fly.

So far I was able to achieve this thanks to alarm9k's post.

The only issue that occurs with this solution is that when building the application you cannot use ng build --prod because using --prod will not work as the angular compiler is not included inside AOT so you are stuck in JIT.

This will result in a much larger application, in my case the size is almost 42MB. So I would like to decrease the file size as this affects the latency of the application quite a lot. I have been viewing the stats of the application and atm it has a latency http p95 latency of 1,2 seconds and a http mean latency of 340 ms.

When using different website speed tests and select the uk as from where the test should be running. I get load time values going from around 600-900ms. When checking multiple locations it gave me an average load time of 5s.

The question:

So I would like to know If there could be a way to split the app in 2 where one is in AOT mode and the other one is in JIT mode, if it is secure to keep a part in JIT mode and if that would minimize the application or not.

If this is not possible I would like to know what the best way is to minimize this application and how this could be done.

Or if there is a way to atleast make the application safer, as all code can be viewed in the browser when being in JIT mode.

EDIT 1:

I forgot to mention that in my case im using socket.js for the activation system so dashboards and templates are somewhat connected. So when going to /:companyname and the device wasn't connected before it automatically goes to /activate where it generates a code and listens if an user enters that code so it can connect the device to the users account.

EDIT 2:

I have been reading that ivy could be used to load components on the fly so one can still be in AOT and without the need of having a compiler. Is this something that can be done, and if so how do you achieve this?

来源:https://stackoverflow.com/questions/60736359/using-both-aot-and-jit-in-production-within-an-angular-9-app

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