Question

我有一个基于微服务的应用程序，每个服务都有一组基于聚合物的Web组件。我想在运行时将它们加载到由其中之一在运行时提供服务的应用程序中，以便可以分别运行，维护和部署服务。我想避免有一个为中央构建服务的组件的npm回购，而每个新的Web组件版本都将需要重新构建和重新部署该应用程序。

现有的延迟加载示例包含同一应用程序的所有延迟加载组件，因此它是作为一个整体构建的，只是打包成块。

该应用程序位于/ 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");
});

然后我可以使用相应的Web组件，但是要使其正常工作，我需要像这样修改该组件：

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来处理映射吗？

Answer 1

以下是我想您的要求的一个很好的例子。模块将加载页面属性。由于页面属性依赖于Iron-page，selected='{{page}}'依赖于Iron-Page的name属性更改了页面值时，其观察者将加载该页面的模块。：

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

Answer 2

似乎Polymer 3尚未准备好用于Web组件的分布式位置。

W3C上存在github问题，可以解决以下问题：

https://github.com/w3c/webcomponents/issues/716 用于真正分布式组件开发的Web组件注册表，不会因命名空间组件注册而发生冲突
https://github.com/domenic/import-maps 引入了从“ nopm模块名称”到位置的映射，这使运行时绑定更加容易

现在，我将切换我的开发模型，以便微服务在nexus的npm repo中提供一个或多个web组件，并且管理应用程序具有对它们的构建时间依赖性，并可以一次构建整个应用程序，在那里我可以使用商店演示还推广/显示的延迟加载方法。

要获得来自多个来源的Web组件的良好开发体验，请查看"npm link"。

一旦技术和标准赶上，就可以随意添加其他解决方案或真正的解决方案。

聚合物3中其他服务的延迟加载Web组件

2 个答案: