In most cases, your UX application will consist of several pages that a user can navigate into and these pages may not necessarily be shown to the screen when the user initially accesses your application. If you are using the <link rel=”import”> tag to import your routing pages, the resources of these pages will be requested and loaded as the page containing these links is being accessed or loaded. If you have a complex application that consists of layers and layers of routing pages, it may not be good to load all your resources at once by using the <link> tag declaration.
In this article, we will show you how to lazy-load your pages to improve the performance of your application, if you are using a <triplat-route> component when handling their routing behavior. Here are the basic steps you need to do to lazy-load your pages:
- Do not use <link rel=”import”> when loading your routing page.
- Add the on-route-active event handler to your triplat-route declaration.
- Add the id attribute to your routing page declaration.
- Lazy-load your page using Polymer importHref API.
Let’s take a closer look at each step…