Performance and JavaScript bundles
How Studio Arcana splits theme JavaScript, optional minify in preflight, and Lighthouse CI thresholds.
Studio Arcana loads JavaScript in focused bundles so pages only fetch what they need. **theme-core.js** handles cart, layout, and shared utilities. **theme-engagement.js** covers galleries, newsletter, quiz, and announcement sections. **theme-product.js** loads on product, collection, search, and index templates (quick view and recently viewed). **theme-collection.js** loads on collection and search for filters and load-more.
The thin **theme.js** loader runs registered init hooks after the bundles load. Run `pnpm theme:preflight` before publish — it syntax-checks all bundles, optionally minifies with esbuild (skip with `THEME_PREFLIGHT_MINIFY=0`), runs Theme Check, and validates docs/locale parity.
Lighthouse CI (`.github/workflows/studio-arcana-lighthouse.yml`) treats **LCP ≤ 2.5s** and **CLS ≤ 0.1** as errors and warns when accessibility score falls below **0.95**. Set repository secrets `LHCI_STORE_ORIGIN`, `LHCI_PREVIEW_THEME_ID`, and `LHCI_PRODUCT_HANDLE` for preview-theme runs.
Sales channels > Online Store > Themes > Customize
Was this page helpful?
Content is maintained by Arcanum Hollow Labs. For internal engineering notes, see the docs/ folder in the monorepo.