Angular 角度模块的HTTP服务器推送

为了提高性能和减少负载，Angular最近和即将进行的所有更新使我确信，现在终于到了从传统的aspnet mvc应用程序更新我们网站的时候了

我正在将网站分成几个模块，包括我们的主要登录页面的单独模块，这些模块可以通过谷歌或facebook广告访问。我显然希望确保这些模块尽快加载

在我的JavaScript启动之前，我曾经使用HTTP服务器推送来推送页面所需的资源，我希望在这里也这样做

例如，如果aspnet服务器收到/producttour的请求，那么我想推送带有http头的“product tour”模块javascript，以便服务器可以立即开始发送它。这将删除此文件（可能是一个相当大的文件）的一个服务器往返。我可能还想推送我知道在任何地方都需要的文件，比如vendor.js

是的，我知道这将只适用于第一页-之后，你在一个角度spa和模块将正常加载

我似乎找不到其他人谈论这件事，这让我感到惊讶

• 随着URL哈希文件名的变化，每次我建立，所以我不知道如何检索它提前发送该文件名硬编码
• 如果没有URL哈希，我可能会意外地加载过时的代码

---

我最好的办法是在禁用哈希的情况下将build-to-index.htm复制到该页面，然后在服务器端手动向其添加？版本并添加标题。

因此问题基本上不完全是角度特定的，但它关心的是在角度真正开始之前会发生什么。 问题可分为两部分：

如何确定需要哪个文件（哪个延迟加载的模块）才能在链接头中发送

一旦识别出文件，如何获取它并将其与应用程序的其余部分连接起来

---

让我们直接进入Nr.1.

• 您的延迟加载模块不必具有那些“丑陋”的哈希名称，您可以将

  --命名块

  甚至

  --输出哈希=无

  与

  ng build

  命令一起使用。这将生成相当普通的名称，您可以将其用作ID，我非常确定angular cli中有一些命名自定义，可以作为顶部的樱桃，但我将留给您决定
• 现在，让我们假设您将该文件直接放在应用程序服务器上，即使它有一个破坏缓存的散列，您也可以找到它。为此，将需要一个小脚本来查找它，获取名称并使用该名称发送链接头
  或者该文件位于CDN上，您很可能不希望在文件名中包含破坏缓存的散列，在这种情况下，再次很容易识别它。唯一的问题是缓存，但您可以通过如下所示的查询字符串模式来解决它

Nr.2.现在您已经获得了文件名，可以发送链接头了。在发送index.html之前，您必须做的另一件事是您必须在那里包含

src=/path/to/lazy模块的
标记，您使用第1点的信息，因此服务器上同样需要一些脚本或模板

我用“sequential”测试了这种方法，然后用
async
和
defer
脚本标记测试了这种方法，并确保延迟加载的模块是最先到达还是最后到达的，它似乎没有任何区别。实际上，延迟加载是从@angular/router（当然）开始的，最后由Webpack的
require执行。确保
，它将自己的
添加到
以获得延迟模块，所以我猜它应该检查这样的脚本是否已经存在。因此，您不必担心订单会被加载两次，而是自己测试它

这样做的结果是，一旦index.html即将发送，您的资源就应该立即被推送，并且一旦Angular启动并开始查找，延迟加载的模块将自动与您的应用程序连接。
long shot。。您是否正在研究服务器端呈现以实现更快的页面服务？可能不会。但我想我应该两个都测试一下。担心这会产生其他问题（不确定是什么），Angular 6路由支持延迟加载。这意味着除非您转到
/producttour
，否则它将永远不会被加载。对于大多数情况来说，这还不够吗？@Ozgur应该是，但我想避免任何闪烁。我想我得测试一下。我仍然有很长的路要走，我才能证明我花了太多的时间来实现这一点，但我想知道是否有其他人以前解决过这个问题。我确实看到在当前站点中，服务器推送确实提高了一些速度；因此，当用户点击你的这个广告index.html，然后是主捆绑包+你拥有的任何供应商，然后这个单独的延迟加载模块（代表登录页）正在/应该被下载，你的目标是在index.html即将发送到客户端时开始加载所有这些JS资产，我在这里暖和了吗？谢谢@dan和你做的测试。手动添加脚本标记的有趣之处。我想知道如果您执行或不执行此操作，性能会受到怎样的影响。如果服务器已经在推送它，那么我认为在加载模块时，只要Angular“请求”，它就会立即可用。我尝试推送未在index.html中声明的公共资产，但我没有成功推送它们。我只把那些声明为
的内容推到了那里。或者没有它也能做到吗？我不知道还有别的办法。关于性能，这并不重要