Code splitting and lazy-loading components for Alpine.js!
Update September 2024 — version 2 release
Async Alpine 2 is a complete rewrite with bug fixes and improvements using Alpine.js's plugin integration. This makes Async Alpine smaller, faster, and easier to use!
This means Async Alpine 2 is not entirely backwards-compatible with Async Alpine 1. Changes are pretty small however, requiring a change to initialisation and a couple easy replacements.
What is it?
Async Alpine is a plugin for the Alpine.js JavaScript framework that allows you to load components asyncronously on-demand.
Alpine.js is a fantastic framework but with a large site with lots of components, the bundle size can start to become a performance problem!
Async Alpine allows you to split your components into multiple component files and only load them when they're needed, speeding up your first load!
Async Alpine in the wild
These are a few great examples of websites using Async Alpine!
Have you built a site with Async Alpine and want to show it off? Let us know!