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!

[vukcevicnikola]

Hi again Greg,

When typing my JS at javascript/script.js it doesn't work in my header file at template-parts/layout/header-content.php ? But when I type in using <script> tag, it's working well :/

Do you have any suggestion? thanks in advance

[gregsullivan]

Hello again! I'm not sure I totally understand what you're trying to do and what isn't working.

Are you saying code added to script.js isn't firing? What does the code do?

(Generally the minified version of the script.js file will be loaded in the footer. Just flagging that since you mention the header-content.php file.)

[vukcevicnikola]

Hi Greg, sorry for late reply on this topic :/ Everything works well.

I would like to know which bundler you are using for this theme? (webpack, parcel, vite)
Thank you in advance.

[gregsullivan]

Very happy to hear everything is now working well!

_tw uses esbuild as its bundler.

Please let me know if you have any other questions!

[vukcevicnikola]

Hi Greg,

I was wondering about tailwind plugins like 'autoprefixer' and 'purgecss' for removing unused classes, does the theme have it already or we need to install them?

Also with using Alpine in our projects, do we need to edit content array in tailwind.config.js for example like this?

content: [
'./theme//*.php', // All PHP files in your theme
'./javascript//.js', // All JavaScript files (e.g., Alpine.js or custom scripts)
'./tailwind/**/.css', // Custom Tailwind-based CSS files, if applicable
'./**/*.html', // Optional: HTML files, if any
],

Thank you in advance!

[gregsullivan]

I was wondering about tailwind plugins like 'autoprefixer' and 'purgecss' for removing unused classes, does the theme have it already or we need to install them?

This is from Tailwind's documentation:

If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically.

In terms of PurgeCSS, Tailwind used it historically, but no longer does because the JIT compilation approach makes it no longer necessary. Here is the key quote from the announcement post:

Your CSS is identical in development and production. Since styles are generated as they are needed, you don’t need to purge unused styles for production, which means you see the exact same CSS in all environments. Never worry about accidentally purging an important style in production again.

---

In terms of the content key, you would only need to add the JavaScript folder if you were putting Tailwind classes in those files. This is conceivable if you were creating custom directives and adding, e.g., x-bind:class attributes there that assigned Tailwind classes. I've never personally done this, but that doesn't mean no one ever would.

You don't need to add the CSS files. They're all loaded via tailwind.css by the CLI and are processed directly by Tailwind.

If you have HTML files as part of your theme and you want their classes to be registered, that would work! I think this is potentially more relevant in the block theme world, but it hasn't come up for me making hybrid themes.

[vukcevicnikola]

I got it!

Thank you for providing this part of Tailwind's documentation and fast support, now it's make sense to me.

Sincerely, Nikola.

[gregsullivan]

You're very welcome!