ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how to enable lazy‑loading for a StencilJS component, reduce bundle size, and verify the change. Follow this step‑by‑step guide to add a <component lazy> tag, provide a fallback, and confirm the chunk is fetched at runtime.
Implementing lazy‑loaded components in a StencilJS app keeps the initial bundle lean. This guide walks through the minimal design, trust boundaries, operational checks, and failure modes that can force a redesign. Use the example snippets and diagnostics to verify a robust lazy‑loading strategy.
Stencil's lazy:true decorator creates a separate chunk for a component that is fetched only on first DOM use. See how to enable it, verify on-demand loading in DevTools, and avoid first-render latency pitfalls.
Learn how StencilJS's `lazy: true` flag creates separate chunks for web components, reducing initial bundle size and deferring load until the component is actually needed.
Learn how to distinguish between @Prop and @State in StencilJS to create clean public APIs and efficient internal state management, including the use of mutable props.
Learn how to enable and configure StencilJS’s built‑in service worker for precaching and PWA routing. Follow this step‑by‑step guide to build, test, and recover from common issues.
Learn how to effectively use @Prop and @State in StencilJS to manage component re-renders and avoid common pitfalls with object mutation in Web Components.
Stencil's React output target generates thin wrapper components so React can pass real props and listen to custom events. Here's what it does, where it fails, and how to verify it.
Deciding between StencilJS's lazy-loaded 'dist' target and the 'dist-custom-elements' bundle is a trade-off between initial load speed and integration simplicity.
stenciljs
react