所以我一直在构建一个 Angular 9 应用程序，其中有一个客户仪表板来管理他们保存在服务器上的模板。可以通过激活系统在不同设备上查看这些模板，从而将设备绑定到用户。
所以让https://templates.com我们说我们有/login, /dashboards,/manage带有查看和编辑数据的子路径。在这个 url 上，我们也在/:companyName这个路径上请求一个模板，其中包含带有插值字符串的 html，以及将被动态加载的 css。
到目前为止，由于alarm9k 的帖子，我能够实现这一目标。
此解决方案发生的唯一问题是，在构建应用程序时您无法使用，ng build --prod因为 using--prod将不起作用，因为 angular 编译器未包含在 AOT 中，因此您陷入了 JIT。
这将导致一个更大的应用程序，在我的情况下，大小几乎是 42MB。所以我想减小文件大小，因为这会极大地影响应用程序的延迟。我一直在查看应用程序和 atm 的统计信息，它的延迟 http p95 延迟为 1.2 秒，http 平均延迟为 340 毫秒。
当使用不同的网站速度测试并选择英国作为测试应该运行的地方。我得到的加载时间值大约为 600-900 毫秒。检查多个位置时，它给了我 5 秒的平均加载时间。
所以我想知道是否有办法将应用程序分成 2 个，其中一个处于 AOT 模式，另一个处于 JIT 模式，如果将一部分保持在 JIT 模式下是安全的，并且这是否可以最大限度地减少申请与否。
如果这是不可能的，我想知道最小化此应用程序的最佳方法是什么，以及如何做到这一点。
或者，如果有一种方法至少可以使应用程序更安全，因为在 JIT 模式下可以在浏览器中查看所有代码。
我忘了提到，在我的情况下，我使用 socket.js 作为激活系统，因此仪表板和模板有些关联。因此，当转到/:companyname并且设备未连接之前，它会自动转到/activate生成代码的位置并侦听用户是否输入该代码，以便将设备连接到用户帐户。
我一直在读到 …
我有一个特殊的项目，但我无法找到有关如何实现这一目标的任何信息。
所以在这个网站上公司可以注册和登录。当公司登录时，他们可以看到设备和组的概览，其中设备可以分为不同的组以便于识别。现在网站的难点在于模板管理。每个设备将显示一个模板，该模板可以是通用指定模板、分配给特定组或单个设备的模板。选择的模板是标准提供的模板，公司制作的自定义模板或我定制的自定义模板。（最后 2 个选项仅对公司本身可见）
这样做的主要原因是显示不同的模板，我的意思是结构差异，如表格、卡片甚至自定义结构。
所以目前我可以根据公司的 id 显示模板。这些模板集成在 angular 应用程序中。所以现在它看起来像这样（这只是一个小例子）：
this.companyName = this.route.snapshot.params['company'];
if(this.companyName == "Google"){
this.template = `<div [ngStyle]="{'border-left':(tr.state=='busy')?'10px solid #D4061C':'10px solid #2CC52E'}">{{data}}</div>`;
this.styles = "div{color: red}";
}
之后发生的是通过将编译器保留在构建中来动态创建组件。所以这意味着这个项目不能在生产模式下构建，因为需要编译器。这意味着部署项目很糟糕，因为代码在浏览器中是可见的，而且大小要大得多，因此加载所有内容需要花费太多时间。我有点想摆脱这种方法并使用其他更容易的方法用
所以我想知道的是：
如果不能为此使用 Angular，您建议使用什么环境，如语言、框架等？
如果需要更多信息，请随时询问！
提前致谢！
我曾尝试使用 [innerHTML] 加载模板，但这在数据绑定或数据插值字符串中无法正常工作。
我会给你一个我想加载的 HTML 的例子：
<div class='exellys' style='width: 1080px ;height: 1920px;background-color: #212121;'>
<div class='clr-row' style='padding:45px 0px 10px 25px; position: relative; width: inherit; height: 115px;'>
<div class='clr-col-5' style='float: left;'>
<div style='width: …