Lazy Import

Declaratively import a HTML component when you're ready to use it. Useful for improving the performance of routing in SPAs built on Web Components.

Installation

Install lazy-import with Bower (Yarn support coming soon)

$ bower i lazy-import --save

Import it into the <head> of your document

<link rel="import" href="/bower_components/lazy-import/lazy-import.html">

Polyfills for cross-browser support

lazy-import relies on emerging standards, for full cross-browser support include the Web Components Lite polyfill.

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js"></script>

Basic usage

Set the path to your element import in the href property, then set active when you want to import it

<lazy-import href="path/to/my-element.html">
  <my-element></my-element>
</lazy-import>

<!-- Import and show <my-element> -->
<script>
  document.querySelector('lazy-import').active = true;
</script>

lazy-import only imports a component once (the first time active is true, or if a new href is set), regardless of how many times active changes. When active is false, lazy-import is set to display: none, so your component is not in the document flow until it is imported.

Lazifying SPA routers

Use lazy-import with simple content switchers like Polymer's iron-pages to turn them into performant, lazy-loading component routers.

Make your router set the active prop on the active route, and wrap view components in lazy-import. That way both the import and your element will be hidden when inactive, and routing will automatically import the view component lazily

<iron-pages
  attr-for-selected="data-route"
  selected-attribute="active"
>
  <lazy-import data-route="app" href="/path/to/my-app">
    <my-app></my-app>
  </lazy-import>

  <lazy-import data-route="other-view" href="/path/to/other-view">
   <other-view></other-view>
  </lazy-import>
</iron-pages>

Properties