Moving our search drop down from Algolia to Alpine.js

Published under JavaScript.

So for the search drop down you see on this website, I initially went with Algolia's InstantSearch.js. This was my implementation:

So this isn't too bad, easy enough to understand and manage. However, my production bundle was 227kb (this includes highlight.js, which I am using for code syntax highlighting).

Seeing this, I decided to try out Alpine.js by Caleb Porzio to see if I could reduce my bundle size without sacrificing functionality. Here's the Alpine.js implementation:

A couple things to note:

And to top it off, the production build JS is down to 27kb: /js/app.js 27.5 kB

If you want to try a demo of the search component, feel free to check out the search component on this website!


Webmentions

❤️ Likes: 9
📣 Retweets: 1
💬 Replies: 0
🙊 Mentions: 0
Enjoyed this post? Have a comment or feedback? Let me know on Twitter!