Skip to content

Instantly share code, notes, and snippets.

@jdrew1303

jdrew1303/_skatejs-rollup-bundle-size-stats.md

Forked from morewry/_skatejs-rollup-bundle-size-stats.md
Created April 7, 2021 01:50
Show Gist options
  • Save jdrew1303/38f2ccb4216b7b08c2602aab09cf9cae to your computer and use it in GitHub Desktop.
Save jdrew1303/38f2ccb4216b7b08c2602aab09cf9cae to your computer and use it in GitHub Desktop.
Download ZIP
Rollup Bundle Stats of "Hello, World" Web Components with SkateJS renderer options. Your approximate bundle size starting point before adding your own code.
Raw
_skatejs-rollup-bundle-size-stats.md

Currently missing the snabbdom renderer; I'll get to it.

Bundle Sizes

Your mileage will vary.

React

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │
│   Bundle Size:  126.8 KB           │
│   Minified Size:  113.27 KB        │
│   Gzipped Size:  35.76 KB          │
│                                    │
└────────────────────────────────────┘
-----------------------------
Rollup File Analysis
-----------------------------
bundle size:    128.053 KB
original size:  132.392 KB
code reduction: 3.28 %
module count:   30

HyperHTML

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │
│   Bundle Size:  69.44 KB           │
│   Minified Size:  21.38 KB         │
│   Gzipped Size:  8.24 KB           │
│                                    │
└────────────────────────────────────┘
-----------------------------
Rollup File Analysis
-----------------------------
bundle size:    66.381 KB
original size:  76.633 KB
code reduction: 13.38 %
module count:   42

Preact

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │
│   Bundle Size:  32.8 KB            │
│   Minified Size:  14.77 KB         │
│   Gzipped Size:  5.36 KB           │
│                                    │
└────────────────────────────────────┘
-----------------------------
Rollup File Analysis
-----------------------------
bundle size:    31.397 KB
original size:  34.905 KB
code reduction: 10.05 %
module count:   17

LitHTML

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │
│   Bundle Size:  51.27 KB           │
│   Minified Size:  13.91 KB         │
│   Gzipped Size:  4.66 KB           │
│                                    │
└────────────────────────────────────┘
-----------------------------
Rollup File Analysis
-----------------------------
bundle size:    49.604 KB
original size:  58.474 KB
code reduction: 15.17 %
module count:   27

Next Steps

  • Add snabbdom and maybe a mustache option.
  • Build for last 2 versions of supported browsers (not just Chrome) and use the polyfills.
  • Profile of baseline parse time, compile time, and memory usage with the "Hello, World" examples.
  • Do some profiling around numerous Web Component instances on a page.
  • Address known bugs with polyfills and AngularJS, possibly by avoiding Shadow DOM until it gets sorted by fix or time.

Takeaways So Far

Before looking at these first four renderer options, I expected LitHTML or HyperHTML to have the leanest build results. Preact ended up beating HyperHTML. In comparison, React was 7.67 times as large as LitHTML and 6.67 times as large as LitHTML.

That difference in gzip size is not decisively significant given that time to transfer 35.76kb on a 3G network is still under a second (though, remember: that's on paper vs real life conditions and 300ms is a perceptible delay), but JS bundle size isn't only an issue over the network, it's also an issue once it arrives. The relationship between parse and compile time are non-linear with JS bundle size, but the relationship does exist and AFAIK is based on the unzipped file size (in this case, of 113.27kb for React vs 14.77kb for Preact).

I suspect there might be ways to cut the size of both the React and HyperHTML builds, but I think it's a data point to consider that this is what I ended up with by spending roughly the same amount of time and attention on each setup.

Raw
hyperhtml.js
import { props, withComponent } from 'skatejs';
import withHyperHtml from './renderer-hyperhtml.js';
class WithHyperHTML extends withComponent(withHyperHtml()) {
static get props() {
return {
name: props.string
};
}
render({ name }) {
return this.html`Hello, ${name}!`;
}
}
customElements.define('with-hyperhtml', WithHyperHTML);
Raw
lit-html.js
import { props, withComponent } from 'skatejs';
import withLitHtml from '@skatejs/renderer-lit-html';
import { html } from 'lit-html';
class WithLitHtml extends withComponent(withLitHtml()) {
static get props() {
return {
name: props.string
};
}
render({ name }) {
return html`Hello, ${name}!`;
}
}
customElements.define('with-lit-html', WithLitHtml);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment