Bundle size with Alpine.js

[vukcevicnikola]

Hi Greg! Thanks for this awesome starter theme and things you are doing about! :)

I'm just curious about adding Alpine.js to my project with your theme, about it's size as a third-party dependency? Will it slow down loading time and general performance?

Thanks in advance.

[gregsullivan]

Hello—Thanks for posting this! And you're very welcome—always very happy to hear people are finding _tw useful.

I use Alpine.js for almost every site I build. To get the exact answer when added within _tw, I generated a new theme, added Alpine.js (and nothing else—no plugins), and then minified and gzipped that file. The result is 15,678 bytes, or roughly 16 KB.

(Using npm run prod within _tw automatically creates a minified version, and gzipping of static assets is something you should confirm is active on your host.)

Alpine.js doesn't need to be render blocking, and the file created by esbuild is placed in the footer by default, so the page will be displayed without the JavaScript file blocking it.

I think 16 KB fits comfortably into most performance budgets, but I don't want to speak for everyone. In my experience, it ends up being smaller than or equal in size to a single weight / style of a web font, which seems like a very reasonable price to pay for what it provides.

[vukcevicnikola]

Hi again :)

Greg, thanks a lot for this kind of detailed answer! I found _tw super useful for custom WordPress projects and was curious just about build with Alpine.js (never used it with WP earlier).

16kb is great job and should deliver best results, I hope you will continue to maintain this awesome project :)

[gregsullivan]

No problem at all. Good luck with your project, and please let me know how it goes!

For whatever it's worth, I paid for the Alpine.js components, and they've been worth it for me for sure.

[vukcevicnikola]

Hi Greg,

I am pleased to inform you that my project has been successfully completed using _tw. The website achieves an exceptional performance score of 100% on Google PageSpeed Insights, marking my first site to achieve this perfect score. You can see it at domain name: biro81000.me - the site has been coded based on the design provided to me by company.

[gregsullivan]

The site looks great—congratulations! (And thanks for passing along the URL!)

[vukcevicnikola]

Thanks so much for your feedback! 🙂

[gregsullivan]

You're very welcome!