I don't find this anything better than just using Next.js or any similar framework. Custom solutions for bundling end up being custom reinvented square wheels in my experience.
He even uses make instead of any of the reinvented square wheels used in JS!
Makefile and sed are decades old, stable, available on every Linux distro including the Alpine docker image clocking in at 30mb total. The entire image containing an Linux distro with all the needed CLI tools is 30mb.
└─ ▶ podman build -t base . && podman images
REPOSITORY TAG IMAGE ID CREATED SIZE
localhost/base latest b593261330c1 1 minutes ago 30.5 MB
Alpine contains an entire package manager. Compare with adding Node and one CLI for minification.
└─ ▶ echo 'RUN apk add npm' >> Containerfile && echo 'RUN npm i -g terser' >> Containerfile && podman build -t node . && podman images
REPOSITORY TAG IMAGE ID CREATED SIZE
localhost/node latest a28f38037137 6 seconds ago 93.5 MB
localhost/base latest b593261330c1 5 minutes ago 30.5 MB
That's just for minification. Want to inline CSS? That sed command is 66 characters long. That's about the same as Parcel's zero-config config boilerplate that is NoOp: https://parceljs.org/features/plugins/. Surely a WebPack config is more than 66 bytes. I proceeded to add Parcel to compare how much it increases the image size, unfortunately it failed because there is a Python dependency:
└─ ▶ echo 'RUN npm i parcel' >> Containerfile && podman build -t parcel .
[2/2] STEP 18/18: RUN npm i parcel
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm ERR! code 1
npm ERR! path /usr/share/nginx/html/node_modules/@parcel/watcher
npm ERR! command failed
npm ERR! command sh -c node-gyp-build
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.0.0
npm ERR! gyp info using node@18.2.0 | linux | arm64
npm ERR! gyp ERR! find Python
└─ ▶ podman images
REPOSITORY TAG IMAGE ID CREATED SIZE
localhost/python latest 05582c8b2425 2 minutes ago 156 MB
Let's take a step back and forget the Parcel example for a second. How about NextJS? From that 30mb Alpine base image:
```Containerfile
RUN apk add npm && npm i next react react-dom
└─ ▶ podman images
REPOSITORY TAG IMAGE ID CREATED SIZE
localhost/nextjs latest d177ee032ff0 9 seconds ago 266 MB
And this is ignoring the time lost watching WebKit process the same thousands of one-liner dependencies over and over.
Instead of the almost instantaneous tools written in go.