你如何避免使用 vanilla web 组件的请求地狱?
Posted
技术标签:
【中文标题】你如何避免使用 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 工具所做的,因为它实际上并没有尝试解释被连接的代码。不用说这种做法是用维护地狱代替请求地狱。
【讨论】:
以上是关于你如何避免使用 vanilla web 组件的请求地狱?的主要内容,如果未能解决你的问题,请参考以下文章
es6 vanilla javascript中的Ajax请求