2 ms·

For those confused about the "29 MB": that's the size of the compiler itself. A compiled Svelte app is tiny. Taking the TodoMVC demo app as an example: React

For those confused about the "29 MB": that's the size of the compiler itself. A compiled Svelte app is tiny. Taking the TodoMVC demo app as an example: React [1] : 289 KiB over the wire (decompresses to 1,255 KiB) Svelte [2] : 28 KiB over the wire (decompresses to 41 KiB) --- [1] http://todomvc.com/examples/react/ http://todomvc.com/examples/react/ [2] https://github.com/sveltejs/svelte-todomvc https://github.com/sveltejs/svelte-todomvc

acemarke 7y ago
FWIW, that React demo should not be used as a network perf comparison in any way: - It's using an ancient version of React (0.13.3) - It's a debug build of "React with addons", not a minified prod build - It appears to include `JSXTransformer.js` as a separate script to handle in-browser JSX compilation If you were to redo this using a modern version of React and a standard CRA build, I guarantee it would be _much_ smaller. edit Just for kicks, I did a quick search and dug up a pre-existing React "TodoMVC" app based on CRA ( https://github.com/ChrisWiles/React-todoMVC https://github.com/ChrisWiles/React-todoMVC ). It's 3 years old, but it was trivial to bump the requirements up to the latest versions of React and react-scripts. From there, running `yarn build` says that: File sizes after gzip: 39.22 KB build\static\js\2.3ec0f98b.chunk.js 2.14 KB build\static\js\main.4514f0a8.chunk.js 1.73 KB build\static\css\2.bc2ff3bb.chunk.css 782 B build\static\js\runtime~main.0ff4d30b.js The actual sizes on disk are: 2.3ec0f98b.chunk.js : 128435b main.4514f0a8.chunk.js: 7259b 2.bc2ff3bb.chunk.css: 5423b runtime~main.0ff4d30b.js: 1577b So yeah, Svelte is certainly going to result in much smaller bundles than a React app, but you have to use a legitimate fair production comparison.
- hajile 7y ago
  Looks like Preact comes in at 6K (compresses to 4.7K). That's pretty interesting when you realize that Preact generally about as fast or faster than Svelte in a lot of benchmarks. https://github.com/developit/preact-todomvc https://github.com/developit/preact-todomvc https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b https://medium.com/@ajmeyghani/javascript-frameworks-perform... That said, I don't know that 6K vs 40K is particularly significant. For small apps, it disappears into the noise compared to ads, images, video, trackers, etc. For large apps, the framework starts to make less and less of a total percentage of the total app and often slides into insignificance on that side as well.
- rpastuszak 7y ago
  React (v16 minified via CRA, prod mode) was slightly above the 30kb mark afaik.

acemarke 7y ago

FWIW, that React demo should not be used as a network perf comparison in any way: - It's using an ancient version of React (0.13.3) - It's a debug build of "React with addons", not a minified prod build - It appears to include `JSXTransformer.js` as a separate script to handle in-browser JSX compilation If you were to redo this using a modern version of React and a standard CRA build, I guarantee it would be _much_ smaller. edit Just for kicks, I did a quick search and dug up a pre-existing React "TodoMVC" app based on CRA ( https://github.com/ChrisWiles/React-todoMVC https://github.com/ChrisWiles/React-todoMVC ). It's 3 years old, but it was trivial to bump the requirements up to the latest versions of React and react-scripts. From there, running `yarn build` says that: File sizes after gzip: 39.22 KB build\static\js\2.3ec0f98b.chunk.js 2.14 KB build\static\js\main.4514f0a8.chunk.js 1.73 KB build\static\css\2.bc2ff3bb.chunk.css 782 B build\static\js\runtime~main.0ff4d30b.js The actual sizes on disk are: 2.3ec0f98b.chunk.js : 128435b main.4514f0a8.chunk.js: 7259b 2.bc2ff3bb.chunk.css: 5423b runtime~main.0ff4d30b.js: 1577b So yeah, Svelte is certainly going to result in much smaller bundles than a React app, but you have to use a legitimate fair production comparison.

hajile 7y ago
Looks like Preact comes in at 6K (compresses to 4.7K). That's pretty interesting when you realize that Preact generally about as fast or faster than Svelte in a lot of benchmarks. https://github.com/developit/preact-todomvc https://github.com/developit/preact-todomvc https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b https://medium.com/@ajmeyghani/javascript-frameworks-perform... That said, I don't know that 6K vs 40K is particularly significant. For small apps, it disappears into the noise compared to ads, images, video, trackers, etc. For large apps, the framework starts to make less and less of a total percentage of the total app and often slides into insignificance on that side as well.
rpastuszak 7y ago
React (v16 minified via CRA, prod mode) was slightly above the 30kb mark afaik.