Idea: Lazy template initialization for unused components

[rockyhung]

I noticed that Solid currently creates compiled templates at module initialization time:

const _tmpl$ = template(`<div class="a"><span></span></div>`);

function Component() {
  return _tmpl$.cloneNode(true);
}

This means every template is created as soon as the module is loaded, even if some components are never rendered.

For large applications, there may be many components that are rarely used (admin pages, dialogs, feature-gated views, etc.), but their templates are still parsed and stored upfront.

Would it make sense to consider lazy template initialization, for example:

let _tmpl$;

function Component() {
  _tmpl$ ||= template(`<div class="a"><span></span></div>`);
  return _tmpl$.cloneNode(true);
}

With this approach:

• Templates are only created when a component is actually rendered.
• Unused components never allocate template DOM.
• A template is still parsed only once and reused afterwards.
• Generated code remains relatively small.

I am curious whether this has been evaluated before, and if there are performance tradeoffs or implementation details that make the current eager initialization preferable.

Thanks!

[chrisjcthomas]

SolidJS's compilation strategy is designed around producing maximum runtime performance. Creating compiled templates at module initialization time (const _tmpl$ = template(...)) is a deliberate design choice with the following trade-offs:

1. Minimizing Runtime Overhead in Hot Paths

By instantiating the template element eager-loaded at the module level, the template DOM structure is parsed by the browser exactly once when the file is loaded. When the component function renders, it only executes _tmpl$.cloneNode(true).

If templates were compiled lazily using _tmpl$ ||= template(...), Solid would have to evaluate a conditional check on every single component execution. In high-frequency rendering hot-paths, this additional branching check introduces small but measurable overhead.

2. Eager Parsing is Lightweight

Creating a template fragment wrapper (document.createElement('template')) without mounting it to the document body is highly optimized in modern browser engines and consumes negligible memory.

3. Idiomatic Solution: Code Splitting

For large applications where components like admin panels or dialogs are rarely accessed, the correct way to defer template initialization and reduce bundle size is Code Splitting.

Using Solid's native lazy() wrapper ensures that the entire module (including the compiled templates, JS helpers, and UI markup) is never fetched, parsed, or initialized until the component is actually rendered:

import { lazy } from "solid-js";

// The entire module containing the template is deferred until render
const LazyAdminDashboard = lazy(() => import("./AdminDashboard"));