Asynchronous Layouts

Asynchronous Layouts

In certain cases, you may prefer not to import every layout directly into your application because doing so results in every imported layout 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 layouts only when they are needed. By loading layouts dynamically as they are required, you can optimize your application's performance and reduce the initial bundle size.

Asynchronous Layout Loading

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

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

Ensure that the layout module Ingress.js exists in the specified directory ./src/templates/views/. The layout 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:

this.layout("text#ingressView1", {
    headline: "My text 1",
    content: "Lorem ipsum dolor"
});

this.layout("text#ingressView2", {
    headline: "My text 2",
    content: "Lorem ipsum dolor"
});

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