简体繁体 English

托管具有差异加载的 Angular 应用程序时，如何决定可以使用 HTTP 2 服务器推送推送哪些文件？

[英]How to decide which files can I push with HTTP 2 Server Push when hosting an Angular App with differential loading?

原文 2019-12-20 07:58:37 2 2 angular/ http2/ server-push

I have an Angular 8 app, which by default generates 2 js files for each bundle, ES5 and ES6 versions.我有一个 Angular 8 应用程序，它默认为每个包生成 2 个 js 文件，ES5 和 ES6 版本。 I would like to leverage HTTP Push, but I don't know which version to push.我想利用 HTTP 推送，但我不知道要推送哪个版本。

Is it possible to somehow find out from the request which bundles should I push.是否有可能以某种方式从请求中找出我应该推送哪些包。

From here it seems like a safe choice to push ES6 version for all browsers except IE.从这里看来，为除 IE 之外的所有浏览器推送 ES6 版本似乎是一个安全的选择。 Is there a better logic?有没有更好的逻辑？ How can I detect whether IE is in use?如何检测IE是否在使用中？

EDIT:编辑：

I fully understand how Angular differential loading is working, the problem is that it is controlled by the browser by deciding which resource to fetch from the offered versions.我完全理解 Angular 差异加载是如何工作的，问题是它由浏览器通过决定从提供的版本中获取哪些资源来控制。 Now with HTTP Server Push, one must decide which resources to push to the client along with index.html , ie before the browser parses the file and chooses a js file version.现在使用 HTTP 服务器推送，必须决定将哪些资源与index.html一起推送到客户端，即在浏览器解析文件并选择js文件版本之前。 More on Server Push (via Nginx).更多关于服务器推送（通过 Nginx）。

So if I push a version that will not be used later, then instead of shortening load time I end up increasing it by making the browser download both versions.因此，如果我推送一个以后不会使用的版本，那么我最终会通过让浏览器下载两个版本来增加加载时间，而不是缩短加载时间。

2 个解决方案

To do so you can enable angular's differential loading feature.为此，您可以启用 angular 的差异加载功能。 Which will allow you to generate dist code in both ES5 and ES6.这将允许您在 ES5 和 ES6 中生成 dist 代码。 This way ES5 code will be loaded if some legacy browser do not support the ES6.如果某些旧版浏览器不支持 ES6，则将通过这种方式加载 ES5 代码。 For more info please go here欲了解更多信息，请到这里

I hope this helps you.我希望这可以帮助你。 Let me know if you got any other questions.如果您有任何其他问题，请告诉我。

Angular CLI understands browsers support range from browserslist configuration. Angular CLI 从 browserslist 配置了解浏览器支持范围。
If the application needs to support ES5 browsers and TypeScript target is higher than es5, the CLI automatically makes additional bundles for compatibility.如果应用程序需要支持 ES5 浏览器并且 TypeScript 目标高于 es5，CLI 会自动制作额外的包以实现兼容性。
browserslist is the single source of truth, so es5BrowserSupport will be deprecated. browserslist 是唯一的真实来源，因此 es5BrowserSupport 将被弃用。

"Differential Loading", It allows us to get free from considering browser compatibility of application. “差异加载”，它让我们从考虑应用程序的浏览器兼容性中解脱出来。