Lazy loading

Lazy loading is a stratergy which defers resource loading (HTML, CSS, JavaScript, imagens, etc.) until they are realy needed, optimizing the inicial page load by preventing the early loading of unessencial elements for the immediate user interaction with the page.

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';
import { Routes } from 'vistajs/router'
import { lazy } from 'vistajs/utils'

const Home = Component('app-home', () => {
  return () => html`<p>Hello Home</p>`;
});

const routes: Routes = [
  {
    path: '',
    component: () => Home
  },
  {
    path: 'about',
    component: lazy(() => import('./pages/about.ts')),
  }
];

const root = document.querySelector('#root') as Element;

bootstrap(document.body, root, {
 routes
})

pages/about.ts