聚合物元素有CDN吗?

时间:2014-07-19 18:03:03

标签: polymer web-component

我想知道聚合物元素是否有任何CDN,因为您必须始终下载元素,并且通过cdn导入它会更方便。在谷歌找不到任何?还有什么理由它不存在或只是因为它是如此新鲜?

6 个答案:

答案 0 :(得分:21)

现在有!

我专门为此创建了这个GitHub存储库:

download/polymer-cdn

所有GitHub存储库都通过RawGit自动进入CDN。因此,使用它,我们现在可以使用这样的标记导入Polymer元素(在这种情况下为iron-icons):

<link rel="import" 
      href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">

项目结构的设置方式使您导入的元素(传递依赖项)的导入能够正确解析。

存储库的自述文件包含它包含的所有元素的列表。

想念什么? Let me know我很乐意加入它。

试一试

你现在可以通过黑客攻击这个Codepen来尝试:

Polymer-CDN Example

或者您可以运行此代码段:

&#13;
&#13;
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
  :root {
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
    --paper-tab-ink: var(--paper-light-blue-100);
    --paper-tabs: {
      color: white;
      background-color: var(--paper-light-blue-500);
    };
  }
</style>

<div>
  <paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
  <paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>

<p><paper-checkbox>Checkbox</paper-checkbox></p>

<p><paper-toggle-button></paper-toggle-button></p>

<paper-tabs selected="0">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <paper-tab>TAB 3</paper-tab>
</paper-tabs>
&#13;
&#13;
&#13;

答案 1 :(得分:6)

您也可以直接从polymer-project.org访问聚合物元素。

示例

<link rel="import" href="https://www.polymer-project.org/0.5/components/core-ajax/core-ajax.html">

答案 2 :(得分:5)

这是一个老问题,但现在有一个非hacky解决方案:http://polygit.org/

它使用窗帘后面的rawgit,但提供了更好的api。

答案 3 :(得分:3)

我现在不知道任何CDN托管聚合物元素,我认为对于生产环境vulcanize它们会更好但是由于大多数元素都托管在github上,你可以链接你的导入rawgit.com

示例:

<link rel="import" href="https://rawgit.com/Polymer/core-ajax/master/core-ajax.html">

答案 4 :(得分:1)

你可以看看cloudflares聚合物CDN: http://cdnjs.com/libraries/polymer

答案 5 :(得分:1)

rawgit选项

您必须手动管理一些依赖项,因为core-ajax.html在polymer.html上返回404。此外,rawgit.com缓存仅设置为5分钟(缓存控制:max-age = 300)。 5分钟缓存适用于版本控制,但对于CDN(https://rawgit.com/Polymer/core-ajax/0.4.1/core-xhr.html)应该更多。文件也不会缩小。

硫化选项

在http / 2发布之前可能是最好的选择。您需要花一些时间在构建过程中进行配置和集成。此外,您没有任何CDN福利(没有数据费用,已经从第三方域缓存了资源。)

<强>结论

在http / 2版本中会有一些CDN使用缩小的聚合物版本和长期过期标题。但我现在对此一无所知。