Lazy Loading

Winnetou's bundler will split the final file into smaller chunks that can be loaded on demand every time you use await import in your code. This is the concept of lazy loading, a way for you to reduce your final min.js file.

async function loadLazyDiv() {
    let lazies = await import("./constructos/lazy.js");
    lazies
        .lazyDiv({ text: "Hello, I'm a lazy constructo" })
        .create("#app");
}
       
      

In this case, the lazyDiv constructo was created within the lazy.html file, but its content was only imported within the asynchronous function loadLazyDiv, thus compile the Winnetou bundle, the final file will be smaller, since another file will also be created, minified, containing the lazy.js constructos.