当使用 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 包括除影子 DOM 之外的所有 polyfill”，并从https://www.npmjs.com/package/web-components-我读到“将 HTML 文件及其所有依赖项复制到公共/输出目录中的命名空间位置”。我可以假设 web-components-loader 执行 webcomponents-lite 默认执行的操作以及其他一些加载功能吗？有什么理由使用其中一种而不是另一种吗？看来 webcomponents-lite 的加载过程较少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？

Answer 1

webcomponents-lite.js即使您使用自然支持的浏览器，例如ChromeButweb-components-loader进行一些浏览器检查，也会加载所有所需的最低限度的填充。由于此检查，由于浏览器支持performance reason.

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