web-component - 你如何避免使用 vanilla web 组件的请求 hell ？

Question

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

背景

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

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

这会导致对服务器的多个请求，每个 javascript 文件一个。这被认为对应用程序性能有害，尤其是在移动设备中，因为 javascript 模块的数量增加了。

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

网页组件

每个 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)，但这是因为(据我了解)聚合物是一个 JavaScript 框架，可以从“聚合物元素”标签动态加载 Web 组件。

对于不依赖诸如 x-tag 或聚合物之类的框架的“ Vanilla ”Web 组件，是否有等效的方法来执行此操作？

Answer 1

硫化

Vulcanize 工具可用于普通 Web 组件(即 HTML 导入)以及 Polymer 框架。然而，它有一些缺点(build设置和讨厌的错误，例如 SVG 解析不正确等)。

HTTP 2.0 (SPDY)

恕我直言，摆脱多请求往返问题的最佳选择是使用 SPDY (HTTP 2.0) .这允许 single physical roundtrip对于所有请求响应，而无需您弄乱漂亮干净的代码。它适用于 HTML、javascript、图像和 Web 组件等。 IE。你可以让你的 HTML 和 Javascript 保持良好和模块化，而不会受到请求 hell 的惩罚。这是最通用的方法，并提供了最干净和最有效的解决方案。缺点是它需要托管在现代 Web 服务器中的现代服务器端应用程序。因此，如果您的服务器支持它，这是避免请求 hell 的 Elixir ，无需神秘的设置和耗时的模式。

手动

如果这些方法都不符合您的要求，您可以通过手动连接内容来优化事物，就像使用普通 Web 内容一样。当涉及到 Web 组件时，几乎没有什么魔力。最大的问题实际上是 HTML 文档片段通常保存在单独的文件中(使用 HTML 导入)，但这实际上不是必需的，而是最佳实践。 HTML 导入可以在没有 Web 组件的情况下使用，而 Web 组件可以在没有 HTML 导入的情况下使用。 Web 组件通常使用文档片段和 Javascript，并且可以方便地将两者包装在导入中。为了避免额外的请求，您可以在一个大文件中简单地定义多个片段。您可以使用 template单个 HTML 文件中每个片段的元素可以轻松地将多个脚本合并到一个文件中。这基本上是 Vulcanize 工具所做的，因为它实际上并没有尝试解释被连接的代码。不用说，这种方法用维护 hell 代替了请求 hell 。