拦截 HTML 进口

Question

我在网上找不到任何东西。我正在使用 Polymer 1.6，并且正在尝试对元素进行延迟加载。到目前为止，我已经成功地延迟加载它们并且速度大大提高了。

我正在做 App Shell 架构，我在其中捆绑（通过缩小和固化）导航栏和抽屉工作所需的所有脚本。但是，一旦我这样做，就会有许多 HTML 导入是 App Shell 的一部分，它们将被调用，因为它们的名称不同。

我可以从我的元素中删除 HTML 导入，但这很容易出错。 注意： 我知道 HTML 导入只执行一次，但由于它们是捆绑包的一部分，浏览器不知道如何阻止它的加载。

所以我想做的是拦截 HTML 导入，检查元素是否是 App Shell 的一部分，如果它已经存在则阻止它的加载。

像这样：

 var appShellComponents : [
    'polymer'
    'my-navbar',
    'paper-button',
    'app-drawer'

    document.addEventListener('HTMLImportEvent', function(event){
       //Untested code below
         var href = event.srcTarget.href;
         var component = href.substr(href.lastIndexOf('/').replace('.html','');
        if(appShellComponents.indexOf(component) > -1){
         //Element has been loaded, reject the import. 
            return;
           }

    });

我还需要一种方法来使用其他浏览器（如 Firefox）进行此操作。显然，Polymer 使用了一个 polyfill 来调用 AJAX。

Answer 1

最好的方法是在服务器端处理文件，使用像 gulp 或 grunt 这样的程序例如。

您可以将 <link> 元素的属性 rel='import' 替换为您自己的自定义名称，例如 rel='lazy-import'，然后在浏览器中使用您自己的模块加载器处理它们。

如果您想在客户端运行时处理链接，您可以等待 link 上的 onload 事件（或 document 上的 HTMLImportsLoaded 事件)，但我想这些事件对于你想要实现的目标来说已经太晚了（实际上这取决于不同的 Web 组件是如何设计的）。

但是使用 polyfill（适用于 Firefox 和 Internet Explorer），这是可能的，因为您可以修补实现 XMLHttpRequest 调用的代码。不幸的是，它不适用于 Chrome 和 Opera，因为 <link> 是本地解析和处理的，而导入文件中的 <script> 在下载时立即执行。

一种解决方法是将 Web 组件移动到文件夹中，这样就不会在初始相对 href URL 中找到它们（或者使用带有错误 [=45] 的 <base> 元素=]).然后您只需在需要时插入 good <link>。

拦截 HTML 进口

Intercepting HTML imports

javascript

html

polymer

dom-events

html-imports