javascriptgziplit-elementlitwc

What does the lit element checksize script do?

Lit Element has a typescript starter project that has a package.json checksize script and it looks like this.

"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"

The rollup -c part produces a nice report that shows the size of the bundle like this:

┌───────────────────────┬──────────┐
│ File name             │ Size     │
│ --------------------- │ -------- │
│ my-element.bundled.js │ 17.07 kB │
│ --------------------- │ -------- │
│ Totals                │ 17.07 kB │

And I'm trying to figure out what the cat my-element.bundled.js | gzip -9 | wc -c part is for.

It produces a number. How do we interpret that number?

For example without changing the lit sample project at all this is the output produced by running checksize:

┌───────────────────────┬──────────┐
│ File name             │ Size     │
│ --------------------- │ -------- │
│ my-element.bundled.js │ 17.07 kB │
│ --------------------- │ -------- │
│ Totals                │ 17.07 kB │
└───────────────────────┴──────────┘
    6325

What is the number 6325?

Solution

  • wc is the "word count" tool. -c tells it to just output the number of bytes. So this code:

    cat my-element.bundled.js | gzip -9 | wc -c

    gzips the JS file then outputs the size in bytes of the result.

    See https://linuxize.com/post/linux-wc-command/ for details on wc.