Which tool(s) for JS/CSS asset management: minify, concat, versioning/cache-busting

Questions Components & MVC
#1

I have a longstanding Laminas MVC project that shows its age, especially in regard to its old-fashioned jQuery-based javascript, and which is lacking all that good bandwidth-saving optimization. So I am looking to improve that (short of rewriting all the js from the ground up).

I want to make my own minified, concatenated bundles and store them in files with their md5 hashes in their names for cache-busting, i.e., to obviate the need to tell my users to hard-refresh their browsers. I am a js dinosaur, just beginning to learn the modern ways (having been writing javascript since 1998 is not necessarily an advantage!), and trying to figure out which task runner or bundler is best suited to my purposes (having so many choices is wonderful, but also kind of a headache!). This is not your sleek modern Single Page App, far from it. I have lots of pages, lots of them with different sets of js files involved. I am thinking the best strategy would be to use grunt and start by optimizing the most frequently used pages first. webpack also looks like it’s extremely popular but I think it might be overkill for my case.

I welcome suggestions.

1 Like
#2

I would really endorse staying away from grunt, gulp and other terrible tools like that: go webpack.

It’s built for that (and in theory only that, but when everything looks like a nail…), and it comes with some decent out-of-the-box defaults and semantics.

#3

Having the highest respect for your opinion, I will now turn my gaze back over to webpack. I know webpack is more of a thing, so to speak, but I had the impression webpack was more oriented towards the very modern, React or Angular or Vue, and SPAs. But I will look again.

What’s so terrible about grunt, et al? If you have time to go into it; if not, no worries.

#4

Hey David,

grunt, gulp, etc are mostly replacements for make: they allow you to glue together steps, although they advertise that they do it in a “piping” and “non-blocking” way.

In practice, what you end up after a couple weeks of working with them is a custom pipeline that only you know, and that is full of quirks to make the individual tools for compressing/minifying/etc work together in a custom way.

In addition to that, the ecosystem around them is extremely fragmented and full of unmaintained, untested or erroneously documented libraries: you may end up spending hours trying to fix a bug, only to figure out that the author of a grunt or gulp integration was abandoned years back (JS fatigue is strong there).

Webpack is indeed aimed at “newer” code, but you can still include very legacy libraries, as long as you have an “entry point” from which you can include all other files, even if not in the most optimal way.

1 Like
#5

Great, thanks. I’m convinced. There’s also the obvious advantage of learning a new new thing, if you will – the most future-oriented, and most popular-for-good-reason.

1 Like