js-framework-benchmark
js-framework-benchmark copied to clipboard
Flag unbundled/raw implementations
I am strongly biased as I submitted my lui demo.
Size- and performance-wise, it is not really first. :wink:
But I noticed that size is only not that good because I did NOT bundle my app.
I think there are use cases for non-bundled apps (no transpilation, no build steps, easier debugging, can be embedded in html snippets...), so it would be nice to flag an app as unbundled/raw so users can see that at the size/first paint area.
It would be ideal to have a filter option "hide transpiled/bundled".
Could be implemented easily, just check if "build-prod": "echo 0" is in package.json.
Ideas?
Not sure if bundling is actually the right term here, I'd say it's minification, isn't it? As for your implementation lui.js with 6.8 kb is already minified, app.js with 4.7 kb is not. I'm not sure how big the influence is on compressed size but I'd guess minification should have a way bigger impact on for the uncompressed size. If you want you can check the impact. Please just submit a PR for a build with minification (we can decide which version we keep afterwards).
I am working on an update pr. I just noticed that in general, some frameworks require the user to build the app (only talking about app.js here!) and some libraries do not need/allow building, like the in-html-template libraries.
From the user (app dev) perspective it does make quite a difference if building is neccessary or not so it might be helpful to show if an implementation is built or raw. (If you embed your tiny applet in template files in magento/wordpress, for example.)
Calling it minified misses the point a bit as for example react with jsx and vue work with their own file format that must be transpiled first. I noticed this by looking at the size but my main concern now is the required build step for some.
Another approach could be to have feature flags for libraries that could be filtered, like "supports ssr", "supports components", "supports typescript", "no build step required", "development mode", "no eval() needed" (#1139)... These flags could be in a tag array in package.json and the tags requirements defined somewhere:
"features": ["ssr-support", "ts-support", "dev-support", "no-build-needed", "no-eval-needed", "no-wasm-needed"]