从 Polymer 3 中的其他服务延迟加载 Web 组件

Question

我有一个基于微服务的应用程序，每个服务都有一组基于聚合物的 Web 组件。我想在运行时间将它们加载到其中一个在运行时间提供服务的应用程序中，这样我就可以运行单独维护和部署服务。我想避免使用 npm 存储库为中央构建的组件提供服务，并且每个新的 Web 组件版本都需要重建和重新部署应用程序。

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

应用程序在 /app/ 下可用，mod规则在 /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 的名称属性更改时，其观察者加载该页面的模块。 :

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();

}

这里是上面的完整代码link。希望这会有所帮助如果有任何问题，我会尽力回复。 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 module names" 到位置的映射，这使得运行时绑定更加容易

现在我将切换我的开发模型，这样微服务会为我在 nexus 中的 npm 存储库提供一个或多个 web 组件，并且管理应用程序对它们具有构建时间依赖性并一次性构建整个应用程序，我可以在那里使用商店演示也 promotes/shows.

的延迟加载方法

要从多个来源获得良好的 Web 组件开发体验，您应该看看 "npm link"。

一旦技术和标准赶上来，请随时为问题添加另一个解决方案或真正的解决方案。

从 Polymer 3 中的其他服务延迟加载 Web 组件

Lazy load web-components from other services in polymer 3

polymer

polymer-3.x