Optimize webpack-builder: minify using swc

[ndelangen]

I found that terserPlugin support swc, and considering what we use to optimize storybook with isn't really a public API anyway... I figured I could just sneak this in and replace terser with swc.

see: https://webpack.js.org/plugins/terser-webpack-plugin/#swc

Related: #18329
Related: #19994
Related: #15548

[ndelangen]

Terser:

(next) % time yarn build-storybook                                                  ~/Projects/Storybook/core/sandbox/react-webpack-18-ts
@storybook/cli v7.1.0-alpha.25

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (106 ms)
info => Compiling preview..
info => Copying static files: /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/node_modules/@storybook/manager/static at /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/storybook-static/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Preview built (13 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   1361.24ea8ce6.iframe.bundle.js (387 KiB)
WARN   6148.5b2a2dc1.iframe.bundle.js (584 KiB)
WARN   1582.5928fbc8.iframe.bundle.js (656 KiB)
WARN   3263.9d4dcf0e.iframe.bundle.js (724 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (770 KiB)
WARN       runtime~main.ccedf27d.iframe.bundle.js
WARN       3263.9d4dcf0e.iframe.bundle.js
WARN       main.d8b478f7.iframe.bundle.js
WARN 
info => Output directory: /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/storybook-static

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

yarn build-storybook  41.26s user 3.15s system 193% cpu 22.930 total

SWC:

(norbert/more-swc) [130] % time yarn build-storybook                                ~/Projects/Storybook/core/sandbox/react-webpack-18-ts
@storybook/cli v7.1.0-alpha.25

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (96 ms)
info => Compiling preview..
info => Copying static files: /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/node_modules/@storybook/manager/static at /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/storybook-static/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Preview built (9.4 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   6148.a13b7117.iframe.bundle.js (578 KiB)
WARN   1361.2d5fb659.iframe.bundle.js (384 KiB)
WARN   1582.0416c6f6.iframe.bundle.js (747 KiB)
WARN   3263.ccb74f38.iframe.bundle.js (736 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (782 KiB)
WARN       runtime~main.8dbb408e.iframe.bundle.js
WARN       3263.ccb74f38.iframe.bundle.js
WARN       main.c81dcd41.iframe.bundle.js
WARN 
info => Output directory: /Users/me/Projects/Storybook/core/sandbox/react-webpack-18-ts/storybook-static
yarn build-storybook  20.49s user 2.76s system 118% cpu 19.576 total

before: yarn build-storybook 41.26s user 3.15s system 193% cpu 22.930 total
after: yarn build-storybook 20.49s user 2.76s system 118% cpu 19.576 total

This data is from an extremely small storybook, I'll do a little investigation on a larger one.

[ndelangen]

I asked @JonathanKolnik to test this change on the chromatic storybook and we saw this:

Before:
✨ Done in 109.34s.

After:
✨ Done in 71.95s.

[ndelangen]

@jonniebigodes When we're writing the docs for the useSWC feature flag, it should mention that besides changing the babel-loader to csw-loader, it also switches TerserPlugin for scwMinify (after this PR is merged)

[jonniebigodes]

Appreciate the heads up @ndelangen, I think we have time between the change being up and it getting published 🙏

[ndelangen]

@shilman self-merging