web-component - 当使用 webcomponents-loader 而不是 webcomponents-lite

Question

我的 bower.json 中有这两个依赖项:Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。

在我的 index.html 中，如果我添加，我看不出有什么不同

<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
or  
<script src="bower_components/webcomponentsjs/webcomponents-loader.js">.

来自 https://www.npmjs.com/package/webcomponents-lite我读到“webcomponents-lite.js 包括除 shadow DOM 之外的所有 polyfill”和来自 https://www.npmjs.com/package/web-components-loader我读到“将 HTML 文件及其所有依赖项复制到公共(public)/输出目录中的命名空间位置”。我可以假设 web-components-loader 做的是 webcomponents-lite 默认做的事情加上其他一些加载功能吗？有什么理由使用一个而不是另一个吗？似乎 webcomponents-lite 加载过程更少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？

Answer 1

webcomponents-lite.js 将加载所有最低要求的 polyfill，即使您使用自然支持的浏览器，如 Chrome 但是 web-components-loader有一些浏览器的检查。由于此检查，由于浏览器支持性能原因，将加载以下文件之一。

webcomponents-hi.html
webcomponents-hi-ce.html
webcomponents-hi-sd.html
webcomponents-hi-sd-ce.html
webcomponents-sd-ce.html

以下检查已应用:

var polyfills = [];

 if (!('import' in document.createElement('link'))) {
    polyfills.push('hi');
  }
  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
    (window.ShadyDOM && window.ShadyDOM.force)) {
    polyfills.push('sd');
  }
  if (!window.customElements || window.customElements.forcePolyfill) {
    polyfills.push('ce');
  }
  // NOTE: any browser that does not have template or ES6 features
  // must load the full suite (called `lite` for legacy reasons) of polyfills.
  if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
    // Edge has broken fragment cloning which means you cannot clone template.content
    !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
    polyfills = ['lite'];
  }

所以，使用 webcomponents-loader 而不是 webcomponents-lite