при использовании webcomponents-loader вместо webcomponents-lite - PullRequest
Новая
       61

при использовании webcomponents-loader вместо webcomponents-lite

0 голосов
/ 15 ноября 2018

У меня есть две зависимости в моем bower.json: Полимер / полимер # ^ 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», а с https://www.npmjs.com/package/web-components-loader Я прочитал «Копирует файл HTMLи все его зависимости от пространства имен в вашем каталоге public / output ".Могу ли я предположить, что web-component-loader делает то, что webcomponents-lite делает по умолчанию, плюс несколько других функций загрузки?Есть ли причина использовать один вместо другого?Кажется, webcomponents-lite делает меньше процесса загрузки, поэтому, если он соответствует моим потребностям, будет ли он лучше, чем webcomponents-loader?

1 Ответ

0 голосов
/ 15 ноября 2018

webcomponents-lite.js загрузит все минимально необходимые полифилы, даже если вы используете браузер с поддержкой природы, такой как 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

...