Ленивая загрузка веб-компонентов из других сервисов в полимер 3 - PullRequest
Новая
       6

Ленивая загрузка веб-компонентов из других сервисов в полимер 3

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

У меня есть приложение на основе микросервиса, и у каждого сервиса есть набор веб-компонентов на основе полимеров. Я хочу загрузить их во время выполнения в приложение, которое обслуживается одним из них во время выполнения, чтобы я мог запускать, поддерживать и развертывать службы отдельно. Я хотел бы избежать использования репозитория npm, который обслуживает компоненты для центральной сборки, и каждая новая версия веб-компонента может потребовать перестройки и повторного развертывания приложения.

Существующие примеры отложенной загрузки - все компоненты отложенной загрузки одного и того же приложения, поэтому оно построено целиком и просто упаковано в куски.

Приложение доступно в / app /, а модули в /mod/...

Я могу сделать это, чтобы отреагировать на маршрут: 

import('/mod/admindashboard/kw-admindashboard.js').then((module) => {
  // Put code in here that you want to run every time when
  // navigating to view1 after my-view1.js is loaded.
  console.log("Loaded admindashboard");
});

и тогда я могу использовать соответствующий веб-компонент, но для этого мне нужно взломать компонент следующим образом: 

import { PolymerElement, html } from '/app/node_modules/@polymer/polymer/polymer-element.js';
import '/app/node_modules/@polymer/iron-icon/iron-icon.js';
import '/app/node_modules/@polymer/iron-icons/iron-icons.js';

class KwAdmindashboard extends PolymerElement {
    static get template() {
...

Но этот подход не позволяет мне полностью запускать тесты, создавать статические сборки, и поддержка IDE также недоступна во многих областях, поскольку она не может увидеть, что доступно позже во время выполнения. Так что в качестве абсолютного отступления это было бы возможно. Разве нет способа использовать serviceWorkers для обработки сопоставления?

Ответы [ 2 ]

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

Похоже, что Polymer 3 еще не готов для распределенных расположений веб-компонентов.

В W3C существуют проблемы с github, которые могут решить эти проблемы:

  • https://github.com/w3c/webcomponents/issues/716 Реестры веб-компонентов для разработки действительно распределенных компонентов без столкновений из-за регистрации компонентов с пространством имен
  • https://github.com/domenic/import-maps представляет сопоставление «имен модулей nopm» с расположениями, что значительно упрощает привязку во время выполнения

Сейчас я переключу свою модель разработки, чтобы микросервисы предоставляли один или несколько веб-компонентов для моего репозитория npm в Nexus, а приложение администратора имело временные зависимости для сборки и собирало все приложение за один раз, и вот яможно использовать подход «отложенной загрузки», который также демонстрирует / демонстрирует магазинная демонстрация.

Чтобы получить достойный опыт разработки с веб-компонентами из нескольких источников, вам следует взглянуть на «ссылка npm» .

Не стесняйтесь добавлять другое решение для проблемы или реальное решение, как таккак технологии и стандарты догнали.

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

Вот ниже, я думаю, хороший пример вашего требования. Модули будут загружены со свойствами страницы. Поскольку свойство страницы зависит от железной страницы, selected='{{page}}' когда значение страницы было изменено с помощью свойств имени железной страницы, его наблюдатель загружает модули этой страницы. : 

static get properties() { return {
    page: {
      type: String,
      reflectToAttribute: true,
      observer: '_pageChanged'
    },
.......

_pageChanged(page, oldPage) {
    if (page != null) {
      let cb = this._pageLoaded.bind(this, Boolean(oldPage));

     // HERE BELOW YOUR PAGE NAMES
      switch (page) {
        case 'list':
          import('./shop-list.js').then(cb);
          break;
        case 'detail':
          import('./shop-detail.js').then(cb);
          break;
        case 'cart':
          import('./shop-cart.js').then(cb);
          break;
        case 'checkout':
          import('./shop-checkout.js').then(cb);
          break;
        default:
          this._pageLoaded(Boolean(oldPage));
      }

здесь выше cb - это функция, которая загружает ленивые модули, но должна загружаться сразу после первого рендеринга. Какой минимум файлов необходим. 

_pageLoaded(shouldResetLayout) {
    this._ensureLazyLoaded();

}

Здесь ссылка на полный код приведена выше. Надеюсь, это поможет. В случае любого вопроса я постараюсь ответить. https://github.com/Polymer/shop/blob/master/src/shop-app.js

...