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使用的是一种调用AJAX的polyfill。

Answer 1

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

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

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

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

<小时/> 解决方法可能是将Web组件移动到文件夹中，以便找不到初始相对href URL（或使用带有错误URL的<base>元素）。然后，您只需在需要时插入好 <link>。

拦截HTML导入

1 个答案: