Asynchronous views

In certain cases, you may prefer not to import every view directly into your application because doing so results in every imported view being bundled into the main JavaScript file during the build process. While this approach works well for most app projects, there are scenarios where you might want to load views only when they are needed. By loading views dynamically as they are required, you "can" optimize your application's performance and reduce the initial bundle size.

Asynchronous View Loading

Implementing asynchronous view loading is straightforward. Just follow these simple steps:

this.view("text", {
    headline: "Welcome!",
    content: "lorem ipsum dolor",
});

Ensure that the view module text.js exists in the specified directory ./src/templates/views/. The view will be loaded asynchronously the first time it's accessed.

Loading the Same View Multiple Times

You can load the same view multiple times by providing unique names for each instance. Here's how you can do it:

const textView1 = this.view("text#textView1", {
    headline: "My text 1",
    content: "Lorem ipsum dolor"
});

const textView2 = this.view("text#textView2", {
    headline: "My text 2",
    content: "Lorem ipsum dolor"
});

By appending a unique identifier after the view name (e.g., #textView1 and #textView2), you can load the same view multiple times with different data. This approach allows you to reuse views efficiently throughout your application.