9

您如何/是否可以避免为每个 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），但那是因为（据我了解） polymer 是一个 JavaScript 框架，可以从“polymer-element”标签动态加载 Web 组件。

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

4

1 回答 1

11

硫化

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

HTTP 2.0 (SPDY)

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

手动

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

于 2014-06-24T20:02:50.613 回答