Inline Components
One of Qwik's super powers lies in its lazy-loading features. Each component will generate a separate Symbol which is downloaded on demand. This allows you to build a large application with many components and only download the components that are needed for the current view.
But for some cases you may want to load a component together with the parent component. For example, if you have a <Greeter>
component that is always used with the <App>
component, you may want to load the <Greeter>
component with the <App>
component. This is called an inline component.
In this example, the <App>
and a <Greeter>
components are prepared for you. The <Greeter />
component is declared using the component$()
method and is a Qwik component. Remove the component$()
to convert <Greeter>
to a inline component.
Open the Symbols
tab and notice that the <Greeter />
component is no longer an independent export, but instead is bundled as part of the <App>
component.