storybookjs / bench

Storybook benchmark

Storybook Bench

A simple benchmark for Storybook. Usage:

npx playwright install
npx @storybook/bench 'npx sb init'

This will:

• Install playwright browsers (unnecessary if you've already installed playwright on your machine)
• Install storybook using sb init (or whatever command is provided)
  • Measure install time and size
• Start
  • Measure build time
  • Measure page load time
• Build
  • Measure build time
• Browse
  • Measure page load time
  • Measure bundle sizes

It outputs all results to the files bench.csv and bench.json. It uploads results to a BigQuery data warehouse if SB_BENCH_UPLOAD and GCP_CREDENTIALS environment variables are set.

Flags

It also accepts the following flags:

option	description
--label	Save as .csv/json and upload with if SB_BENCH_UPLOAD is true
--no-install	Do not measure storybook install time
--no-start	Do not measure storybook start time
--no-browse	Do not measure storybook browse time

Environment variables

And consumes the following environment variables:

variable	description
SB_BENCH_UPLOAD	Upload results to GCP if set to tue
GCP_CREDENTIALS	For upload, the GCP credentials to use as stringified JSON
CIRCLE_BRANCH	For upload, the branch if running in Circle CI
CIRCLE_SHA1	For upload, the commit hash if running in Circle CI

bench's Issues

[Bug] Output location

Describe the bug

I run with npx @storybook/bench 'yarn storybook' and storybook starts but there is no output.
What is supposed to happen?

[Bug] Bundle sizes are incorrect

Describe the bug

I'm testing out benchmarking and found a strange result in the numbers I'm seeing for bundle size.

"size": {
    "total": 12857,
      "manager": {
        "total": 2238,
        "main": 0,
        "runtime": 4,
        "vendors": 2233,
        "uiDll": 0
      },

It struck me as odd that main would be listed as 0, so I took a look at the file:

(window.webpackJsonp = window.webpackJsonp || []).push([
  [2],
  {
    464: function (module, exports, __webpack_require__) {
      __webpack_require__(465),
        __webpack_require__(816),
        __webpack_require__(802),
        __webpack_require__(820),
        __webpack_require__(821),
        __webpack_require__(817),
        __webpack_require__(814),
        __webpack_require__(813),
        __webpack_require__(815),
        __webpack_require__(812),
        __webpack_require__(818),
        __webpack_require__(819),
        (module.exports = __webpack_require__(811));
    },
    524: function (module, exports) {},
  },
  [[464, 3, 4]],
]);

It seems like we'd need to actually crawl the require/import tree and count the filesize of any other files/modules that are being required in.

I wonder if it would be simpler and at least more accurate than the current results to total up the filesizes of any file ending in .manager.bundle.js for the manager (and I guess similarly for the webpack preview). The vite preview will have a similar problem, in that multiple chunks can be created. But, this approach may fall short when storyStoreV7 is enabled, since the main bundle won't include all the files. Would we still want to total up all the files? What is the goal of tracking bundle size? Maybe the answer to that last question will help answer some of the others.