5 ms·
> ... and smaller size than just about anything else out there. Compare a styled Hello World example to React or any other framework: Compared with svelte from
by arve0 7y ago
> ... and smaller size than just about anything else out there.
Compare a styled Hello World example to React or any other framework:
Compared with svelte from the article:
<script>
export let name;
</script>
<style>
p {
background: pink;
}
</style>
<p>Hello {name}!</p>
# Size comparison
## lit-element
lit-element.js?module: 8421 bytes
lit-hello.js: 340 bytes
## svelte
bundle.js: 2628 bytes
bundle.css: 72 bytes
- spankalee 7y ago1) That's the raw unbundled module source from unpkg. Bundled, minified, and gzipped lit-element + lit-html is about 6.7K. 2) Svelte bundles the runtime operations that each component uses directly into every component. HelloWorld doesn't use much, so it'll be small, but most component are not HelloWorld and most applications will not have only a single component. The cost of the common dependency on LitElement is amortized over all the elements that use it.
- arve0 7y ago> Bundled, minified, and gzipped Why gzipped? Bytes of source is a fairer comparison. Parsed source code should be the comparison, not transfer time. > HelloWorld doesn't use much, so it'll be small, but most component are not HelloWorld and most applications will not have only a single component. Then why dare other to compare sizes of a Hello world example? :-)
- spankalee 7y agoHuh? I'm not comparing the size of hello world examples.
- arve0 7y agoThen I read your first comment wrong, I was referring to my quote in https://news.ycombinator.com/item?id=20236130 https://news.ycombinator.com/item?id=20236130 Regarding the comparison in source bytes, here it is: minified lit-(element + html)[1]: 21.4k I'm not sure it "amortizes" svelte when having more components, when runtime in hello world example is less then 8x size. Would love to see an example. Tried finding lit-element in "Real World Example" [2], but did not find it. Maybe you have some pointers? 1: https://bundlephobia.com/result?p=lit-element@2.2.0 https://bundlephobia.com/result?p=lit-element@2.2.0 2: https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/ https://www.freecodecamp.org/news/a-realworld-comparison-of-...