Stencil Component Prefetch

Without Pre-fetching

This example component does not exist anywhere in the DOM on page load, so the code is not retrieved by the browser.
Open up developer tools and inspect the network tab.
Clear the history to make it easier to see new requests.
Click the button and you will see a new network request for the component as it is added.

<button onClick="addExample1()">Add Example 1 Component</button> <div id="example-1"></div>

var addExample1 = function() { const container = document.querySelector('#example-1'); const component = document.createElement('example-component-1'); container.innerHTML = ''; container.appendChild(component); }

With Pre-fetching

This example component does not exist anywhere in the DOM on page load, but is pre-fetched by the browser.
Open up developer tools and inspect the network tab.
Clear the history to make it easier to see new requests.
Click the button and you will see NO network request for the component as it has been pre-fetched.
Refresh the page and try both examples again.
You may notice that even with this minimal example component there is a slight delay adding Example 1 and none for Example 2.

<button onClick="addExample2()">Add Example 2 Component</button> <div id="example-2"></div> <stencil-component-prefetch id="example-2-prefetcher"></stencil-component-prefetch>

// on load const prefetcher = document.querySelector('#example-2-prefetcher'); const components = [ { tag: 'example-component-2' } ]; prefetcher.setDelay(0).then(() => { prefetcher.setComponents(components); }); var addExample2 = function() { const container = document.querySelector('#example-2'); const component = document.createElement('example-component-2'); container.innerHTML = ''; container.appendChild(component); }