Default Optimization settings for Modes

[thescientist13]

As Greenwood has the concepts of mode and optimization:

• mode: the type of app your building, eg. SSG vs SPA and more about project architecture
• optimization: how you want to deliver your assets, either statically, or preloaded, etc

It would be good to explore and provide / document defaults for each mode.

Mode	JavaScript	CSS	Router	GraphQL
SSG	defer	inline	N / A	defer
MPA	defer	inline	defer	defer
SPA	preload	preload	defer	async

[thescientist13]

Noticing these warning with the current settings, fwiw

And looks like Next is moving to defer?
https://twitter.com/shubhie/status/1391891309338660864

[thescientist13]

We should make sure to take any notes from this video, in particular some takeaways

• should still keep JavaScript loading at the end, or at least use defer
• base64 encoding can be more bulky / increase payloads
• keep assets (images, SVGs) out of JS as much as possible, e.g. don't bundle
• can use link preload for images!

[thescientist13]

Good post by Guy Bedford covering code / splitting and module preloading .
https://guybedford.com/es-module-preloading-integrity

[thescientist13]

As part of working on #546 , I wasn't able to get a data-gwd-opt="none" override option to work, since for JavaScript (Rollup + Terser) and for CSS (PostCSS), optimizations happen at a "plugin" level for those respective tools, which means it's applied to all files equally. So somehow we would need to figure out a way to filter or exclude certain files from this somehow, but likely that would have to be done at the plugin level, and until we build the app, we don't know which files to exclude, and of course it will keep changing as development happens.

Only immediate thought I had was that maybe we could use sourcemaps to reverse engineer the source? But we don't necessarily want the source, we want the bundled output, but just nothing more than that, for just that particular file... 🤔

---

edit: actually, for CSS, it's done per file, so we might have a better chance supporting it that way, but how would be able to hint from the browser that is has a particular data attribute??

[thescientist13]

An interesting note from this thread

JS modules do not block the parser. <script type="module"> implies defer.

[thescientist13]

This could be a useful (optional) diagnostic tool to provide, maybe?
https://csswizardry.com/ct/

[aholtzman]

Indeed. It may be good to see where we can optimize how static files are generated.