Production builds

[JoviDeCroock]

Hey,

I've been looking into this concept of no build/bundle dev-env a lot lately. I do wonder how when for example using the following import https://unpkg.com/es-react@16.8.30/index.js.

How do you see this in the production environment, does the bundled output keep references to these external modules or should a bundler be used to fetch these and bundle them into the final bundle?

With bundle size in mind, I've made an own small POC with Preact etc on the idea of this repo: https://github.com/JoviDeCroock/Vanilla-Preact-Application

Thanks for the awesome idea, greets Jovi!

[lukejacksonn]

Hey Jovi 👋so I haven't really had chance to look into bundling one of these apps at deploy time yet. Not sure if bundlers account for https://unpkg.com/... imports yet but there is probably a plugin that will do something like you suggest already.

For one of my apps I have built with this architecture I actually chose to resolve the appropriate package (for dev/production) at runtime using dynamic imports like this:

https://github.com/lukejacksonn/perflink/blob/master/index.js#L4

It is not really a sustainable solution though. I am waiting for something like this https://github.com/WICG/import-maps

Another approach I thought of is writing a very simple script that takes a mapping of devUrl: productionUrl then doing a grep of all files in a project, looking for any devUrl and replacing it with the productionUrl. A script like this could also surface other useful analytics like how many packages a project depends on, if there are any imports without versions or version mismatches etc.

[JoviDeCroock]

Well the unpkg dependencies won’t scale well when getting towards many of them + aren’t minified etc. Which can be solved with prod/dev url.

i’ll let you know if I find anything in terms of bundlers or a good approach to this. I’m really all for a dev-env that doesn’t need complex configurations.

[lukejacksonn]

The browsers caching of modules is really good and so is gzip. I'm not actually convinced that that the approach won't scale but I'd still be interested in seeing a lightweight "optimizer script" that would take a project and do the best it could to reduce dependency chain length or number of imports through concatenation etc. or a CDN that minified files at request time.

That said, I feel that even this could be early/over optimisation. I'd say keep growing your app without any of these optimisation steps (but keep in mind pitfalls) and optimize when it is proven that the architecture is actually causing a sub optimal user experience; I believe you will get very far just applying static and dynamic imports appropriately.

Anyway, look forward to hearing about your progress whichever path you decided to go down!

[JoviDeCroock]

Just bumping with something I've read to also keep you in the loop: https://github.com/mjackson/rollup-plugin-url-resolve

This could be a really good first step to devving with the current setup but building when needed.