代码之家 › 专栏 › 技术社区 › Patrick Cornelissen

从polymer 3中的其他服务延迟加载web组件

polymer-3.x polymer

Patrick Cornelissen · 技术社区 · 6 年前

我希望避免使用npm repo来为中心构建的组件提供服务,并且每个新的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来处理映射吗?

2 回复 | 直到 6 年前

Cappittall 6 年前

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

Patrick Cornelissen 6 年前

聚合物3似乎还没有准备好用于网络组件的分布式位置。

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

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

要获得使用来自多个来源的网络组件的良好开发体验,您应该看看 "npm link"

只要技术和标准跟上,就可以为问题添加另一个解决方案或真正的解决方案。