Bundle size analysis missing for prebuilt manager

[ghengeveld]

We used to generate a bundle size report when compiling the prebuilt manager. This was removed/disabled in the webpack4/5 split. We should restore it.

Original PR introducing this feature: #13425
It got disabled here: 4eabfd4
Note that we are now building two prebuilt managers, for both webpack4 and webpack5.

[ndelangen]

This seems like an easy task to be picked up by a new contributor!

I recon the implementation could be that after running build-storybook we print a report similar to the one we print when storybook is started in dev mode:

╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 7.0.0-beta.29 for react-vite built     │
│   7.52 s for preview ( 2.6 mb )                    │
│   2.59 s for manager ( 1.3 mb )                    │
│                                                    │
│   Directory:                                       │
│   "./storybook-static"                             │
│                                                    │
│   You could host it with any http server:          │
│   "npx http-server ./storybook-static"             │
│                                                    │
╰────────────────────────────────────────────────────╯

We could also cleanup the CLI output a lot in the process when running build-storybook.

[adityaKrModak]

Please assign this issue to me.

[ndelangen]

Consider it yours @adityaKrModak !

[ndelangen]

I think the message should be logged somewhere here:

storybook/code/lib/core-server/src/build-static.ts

Line 235 in 1666d5f

logger.info(`=> Output directory: ${options.outputDir}`);

You can gather the data by reading the file-system, I think.

Here's where we print the box for dev-mode:

storybook/code/lib/core-server/src/utils/output-startup-information.ts

Lines 62 to 72 in 65957e6

	console.log(
	boxen(
	dedent`
	${colors.green(`Storybook ${chalk.bold(version)} for ${chalk.bold(name)} started`)}
	${chalk.gray(timeStatement)}
	${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''}
	`,
	{ borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any
	)
	);