你如何避免使用 vanilla web 组件的请求地狱？

Posted 2023-02-23

【中文标题】你如何避免使用 vanilla web 组件的请求地狱？

【英文标题】：How do you avoid request hell with vanilla web components?

【发布时间】：2014-07-06 21:05:57

【问题描述】：

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

背景

所以，现在很多人使用 javascript 使用所谓的 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">

如果您使用聚合物，您可以使用 vulcanize 工具来组合聚合物组件 (http://www.polymer-project.org/articles/concatenating-web-components.html)，但那是因为（据我了解）聚合物是一个 javascript 框架，可以从“polymer-element”动态加载 Web 组件"标签。

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

【参考方案1】：

硫化

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

HTTP 2.0 (SPDY)

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

手动

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