你如何避免与香草网络组件请求地狱？

Question

您如何/可以避免每个Web组件发出服务器请求？

背景

所以,有了javascript,很多人现在正在使用所谓的AMD模块加载模型,其中所有模块都是单独的javascript文件,并根据需要包含在内.例如.

- main.js
-- module1/mod1.js
-- module2/mod2.js
-- module3/mod3.js

这导致对服务器的多个请求,每个javascript文件一个.这被认为对应用程序性能有害,特别是在移动设备中,随着javascript模块数量的增加.

因此,诸如require.js之类的工具提供了一个编译器,它将自动跟踪依赖关系并生成包含其中所有模块的单个javascript文件; 有效地减少了单个文件的请求开销(通常是app-min.js).

Web组件

每个Web组件都位于外部文件岛中,并使用标头中的链接标记导入:

<link rel="import" href="elements/image-gallery.html">
<link rel="import" href="elements/social-media.html">
<link rel="import" href="elements/pinmap.html">
<link rel="import" href="elements/nav-menu.html">

如果你正在使用聚合物,你可以使用硫化工具来组合聚合物组分(http://www.polymer-project.org/articles/concatenating-web-components.html),但这是因为(据我所知) polymer是一个javascript框架,可以从"polymer-element"标签动态加载Web组件.

使用不依赖于x-tag或聚合物等框架工作的"vanilla"Web组件是否有相同的方法？

Answer 1

热补

Vulcanize工具可以与vanilla Web组件(即HTML导入)以及Polymer框架一起使用.然而,它有一些缺点(构建设置和令人讨厌的错误,例如不正确的SVG解析等).

HTTP 2.0(SPDY)

恕我直言,摆脱多个请求往返问题的最佳选择是使用SPDY(HTTP 2.0).这允许所有请求响应的单个物理往返,而不需要弄乱你的漂亮和干净的代码.它适用于HTML,JavaScript,图像和Web组件.即你可以保持你的HTML和Javascript良好和模块化,而不会受到请求地狱的惩罚.这是最通用的方法,提供最清洁,最有效的解决方案.缺点是它需要在现代Web服务器中托管的现代服务器端应用程序.因此,如果您的服务器支持它,这是避免请求地狱的银弹,没有神秘的设置和耗时的模式.

手动

如果这些方法都不适合您的账单,那么您可以通过手动连接内容来违反所有美观和可管理的内容,并以与使用vanilla Web内容相同的方式优化内容.谈到Web组件时,几乎没有什么神奇之处.最重要的事情实际上是一个HTML文档片段通常保存在单独的文件(使用HTML进口),但是这实际上不是一个要求,而是一个最佳实践.可以在没有Web组件的情况下使用HTML导入,并且可以在不使用HTML导入的情 Web组件通常使用文档片段和Javascript,并且可以方便地将它们包装在导入中.为了避免额外的请求,您可以在一个大文件中简单地定义多个片段.您可以通过template在单个HTML文件中使用每个片段的元素来实现此目的,只需将多个脚本合并在一个文件中即可.这基本上是Vulcanize工具所做的,因为它实际上并不试图解释被连接的代码.没必要说这种方法用维护地狱取代了地狱请求.