HTTP服务器推送角度模块

Question

Angular最近和即将发布的更新，以提高性能和减少有效负载，让我确信它终于有时间从传统的aspnet mvc应用程序更新我们的网站。

我将网站拆分为模块，包括我们的主要目标网页的单独模块 - 可以通过Google或facebook广告获得。我显然希望尽可能快地确保这些负载。

我过去曾使用HTTP服务器推送来推送我的JavaScript启动之前页面所需的资源，并且ID就像在这里做同样的事情。

EG。如果aspnet服务器收到了/ producttour的请求，那么我想推进产品之旅＆＃39;带有http标头的模块javascript，以便服务器可以立即开始发送它。这将删除此文件的一个服务器往返（可能是一个非常大的文件）。我也可能想要推送我知道需要的文件，例如vendor.js

是的我意识到这只适用于第一页 - 之后您将进入角度水疗中心并且模块将正常加载。

我似乎无法找到其他人在谈论这一点让我感到惊讶。

• 使用URL哈希，每次构建时文件名都会更改，所以我不知道如何提前检索它以发送硬编码的文件名。
• 如果没有URL哈希，我可能会意外加载过时的代码。

我最好的想法是将Ng构建到index.htm并禁用散列，复制该页面，然后在服务器端手动添加？版本并添加标题。

Answer 1

所以这个问题基本上不是Angular特有的，但它关注的是Angular实际开始之前发生的事情。 问题可以分为两部分：

1. 如何识别需要哪个文件（哪个延迟加载模块）才能在Link标头中发送？
2. 识别文件后，如何获取该文件并将其与应用程序的其余部分连接起来？

让我们直接进入Nr。 1。

• 您的延迟加载模块不一定必须包含那些“丑陋”的名称，您可以将--named-chunks甚至--output-hashing=none与ng build命令一起使用。这将生成相当普通的名称，你可以使用它作为ID，我很确定在angular-cli中有一些命名自定义可能作为樱桃在顶部，但我会留给你。

• 现在让我们假设您直接在应用服务器上拥有该文件，即使它有缓存清除哈希，您也可以找到它。为此目的，将需要一个小脚本来查找它，获取名称并使用该名称来发送链接头。

  或者该文件位于 CDN ，您可能不希望在文件名中使用缓存清除哈希值，在这种情况下，再次识别它也很容易。唯一的问题是缓存，但您可以使用查询字符串模式解决此问题，如Azure caching article所示。

Nr。 2。现在您已获得文件名，您可以发送链接标头。在发送 index.html 之前，您唯一需要做的就是您必须在<script>包含<{1}}标记，并为其添加src=/path/to/the-lazy-module使用第1点的信息，所以在服务器上再次需要一些脚本或模板。

我使用“顺序”，然后async和defer 脚本标记测试了此方法，并确保延迟加载的模块首先到达或最后到达而且它没有似乎有所作为。实际上，延迟加载是从 @ angular / router （当然）开始的，最后由Webpack的require.ensure执行，它将自己的<script>添加到{{1}为了得到懒惰的模块，所以我的猜测是检查这样的脚本是否已经存在。因此，您不必担心订单或将被加载两次，而是自己测试。

执行所有这些操作的结果是，一旦 index.html 即将发送，您的资源应立即被推送，并且延迟加载的模块将在Angular时自动与您的应用程序连接开始寻找它们。