时间戳

首页 > 解决方案 > 延迟加载聚合物 3 中其他服务的 Web 组件

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

问题描述

我有一个基于微服务的应用程序，每个服务都有一组基于聚合物的 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 来处理映射吗？

标签： polymerpolymer-3.x

解决方案

下面是我认为您的要求的一个很好的例子。模块将加载页面属性。由于 page 属性依赖于 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

推荐阅读