当使用 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 I read "webcomponents-lite.js includes all polyfills except for shadow DOM" and from https://www.npmjs.com/package/web-components-loader读到"Copies the HTML file and all of its dependencies to a namespaced location in your public/output directory"。我可以假设 web-components-loader 做的是 webcomponents-lite 默认做的事情加上其他一些加载功能吗？有什么理由使用一个而不是另一个吗？似乎 webcomponents-lite 加载过程更少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？

Answer 1

webcomponents-lite.js 将加载所有最低要求的 polyfill，即使您使用像 Chrome 这样自然支持的浏览器，但是 web-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

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

when use webcomponents-loader instead of webcomponents-lite

web-component

polyfills

polymer-2.x