Modern JS workflow for small sites

#1

Okay, something I’ve been wondering for a while.

A lot of my projects are small/medium WP sites. Most of the time the amount of JavaScript needed is fairly small, so I tend to separate components into individual vanilla JS files, and then use webpack to run these through babel and concatenate into a single JS file which is sent over the wire.

This clearly doesn’t scale well, and it feels like there must be a better approach that also automatically splits components so each page only receives what it needs. We’re still talking a pretty small amount of JS most of the time, so I’ve always thought a framework would be overkill, but I’ve had trouble finding articles/tutorials about JS workflows at this scale.

What is everyone else doing? Am I being naïve by avoiding frameworks? This has been a blind spot in my project workflow for a while, so now seems like a good time to finally get it sorted!

#2

I do something similar. In Wordpress if it’s js for a specific page or post type I conditionally include the single file in functions.php

2 Likes
#3

Yeah, maybe that is the best way at this scale. It has just always felt like a somewhat clunky part of my workflow.

#4

If your combined JavaScript is still relatively lightweight, it’s worth considering if this is really a problem. How does its size compare to other assets on your site, such as images? Could a single JS file, that can be cached by the browser, actually be better than delivering different JS to each page?

While there are plenty of clever ways to optimise resources, I also tend to think there’s a balance to be struck between the benefits of these optimisations and the complexity of your workflow. There’s more benefit to be gained from optimisation if you’re working on a site with very heavy traffic, or if a large percentage of your user group is likely to have low bandwidth, e.g. mobile users.

#5

Completely agree, and that’s why I haven’t really done anything about this up till now.

I wonder if this is basically fine up to the point that a framework would become necessary/desirable.

1 Like
#6

Hey, I was in a very similar position and found this webpack example super helpful. It takes multiple entry points and then outputs multiple js files.

2 Likes
#7

That looks great, thanks for sharing. I’ll have a read of the docs and see if I can integrate it into my next project.

#8

I’ve been shipping single web components or little JS modules and including them per template/view for piccalilli. I’ve not even minified them!

I have a little “scripts” nunjucks block that sticks them at the bottom of the base template

1 Like
#9

For WordPress specifically I’ve been breaking things into components and using Advanced Custom Fields to choose different components for each page.

Each component enqueues its own css and JS file and with http2 it seems (I haven’t done extensive testing) about as fast as concatenating them all, plus it means the assets are only loading if the components exists.

#10

Makes sense. I was also thinking that individual Gutenberg blocks can pull in their own JS files. Only problem then I guess is repetition of the same block is included multiple times on a page. That’s manageable though.

Thanks for all the responses everyone.

1 Like