Finally able to emerge from behind a 5 year old gulp bundle mess. I'm capable of front end but certainly not a specialist and haven't kept up with the times. What do people recommend if you want to build a nice modular site with css and js bundles dynamically created for just what's needed (site has big use of block lists where a module library is used to build up each page). Tempted to use Smidge as it's where my head is for what I need. I'm stuck with a bit of JQuery legacy but want a solution that let's me update and migrate module by module and eventually drop that too. What's the 2024 way of doing this in a largish Umbraco project?

Mostly Block Grid and CSS Grid and Block List and Flexbox for me. Dart Sass compiles your Sass in a single command:

sass --watch scss:wwwroot/css

And mostly Vanilla JavaScript where required but CSS handles so much now. As for modular Block Grid handles that for you. Please take a look at UmBootstrap for a bunch of examples.

My approach is to write web components. You can do this with vanilla JS, or TS, and frameworks to make it easier. If you’re gonna stay in the Umbraco ecosystem then playing around with the Lit framework would be beneficial as you could follow along with their own source code to understand and learn from. I’ve recently gone tool-less (?) and I’m attempting to not use any build systems at all. Browser support for both nested CSS (and many other improvements) and JS modules means I may not need to anymore.

Yes builds of frontend feel clunky in this world. I have (as is par for the course) a fair bit of legacy to support. Including a full ecommerce basket and checkout in jquery. My mind is along the lines of taking this on a component basis and only loading in the legacy bloat where needed anyhow.

We've had some success in integrating Vite with Umbraco for frontend stuff (mainly through AspNetCore.SpaServices). Works well for frontend builds both locally and in a CI/CD pipeline.