Replace UglifyJS with babel-minify

[ndelangen]

This came up in: #1501
A node_module we want to use has not been transpiled to es5 before publishing.

We could add the module to be run through babel, or we could do this:
Switch over to an alternative minifier. This PR swaps UglifyJS for Babel-Minify.

Why? Well the browsers we target actually support 90%+ of ES6+. Transpiling down

Related issue: #1005

This only affects static builds!

How to test

Run yarn build-storybook on cra-kitchen-sink
Serve the static site

What about bundle size?

1.396.924 bytes (1,4 MB on disk)
That's down considerably from before:
2.032.284 bytes (2 MB on disk)

[ndelangen]

[codecov]

Codecov Report

Merging #1733 into release/3.3 will decrease coverage by <.01%.
The diff coverage is 0%.

@@               Coverage Diff               @@
##           release/3.3    #1733      +/-   ##
===============================================
- Coverage        22.77%   22.77%   -0.01%     
===============================================
  Files              326      326              
  Lines             6753     6754       +1     
  Branches           829      841      +12     
===============================================
  Hits              1538     1538              
+ Misses            4621     4607      -14     
- Partials           594      609      +15

Impacted Files	Coverage Δ
app/vue/src/server/config/webpack.config.prod.js	0% <ø> (ø)	⬆️
app/react/src/server/config/webpack.config.prod.js	0% <ø> (ø)	⬆️
...ct-native/src/server/config/webpack.config.prod.js	0% <0%> (ø)	⬆️
addons/a11y/src/components/Tabs.js	0% <0%> (ø)	⬆️
addons/knobs/src/components/PropField.js	10.63% <0%> (ø)	⬆️
addons/viewport/src/components/SelectViewport.js	15% <0%> (ø)	⬆️
.../src/modules/ui/components/stories_panel/header.js	29.62% <0%> (ø)	⬆️
addons/info/src/components/Props.js	37.2% <0%> (ø)	⬆️
addons/viewport/src/components/viewportInfo.js	36.36% <0%> (ø)	⬆️
addons/info/src/components/markdown/code.js	24.13% <0%> (ø)	⬆️
... and 28 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a52a91d...4280d32. Read the comment docs.

[usulpro]

I tried to test it locally with my branch and it takes about 8 min to finish building
All except this works fine! 👍

(I will try to clean everything and run it again tomorrow)

[ndelangen]

Wow, that's a long time.. For me it was about 80 seconds

[usulpro]

got 87 sec today!

[usulpro]

I'd love to have it merged

[ndelangen]

I want someone to verify react-native other then me

[tmeasday]

I tried it with RN-vanilla (just ran the storybook as usual), and it worked fine. How do I run a build with RN?

[tmeasday]

I'm not sure that build is implemented yet for RN (https://github.com/storybooks/storybook/tree/master/app/react-native/src/bin), so I wonder if the prod babel config for RN serves any purpose?

[ndelangen]

@tmeasday I've looked into this, and it would appear there is no production build possible for RN.
This kinda makes sense to me.

I'm hoping @mnmtanish can verify?

[Hypnosphi]

So do those errors happen foryou in IE11 only, or in other browsers as well?

[igor-dv]

In Chrome and FF

[Hypnosphi]

I can confirm this in Chrome on mac as well (when running build-storybook + http-server)

[Hypnosphi]

The problem was the name mangling, plus the fact that we have to use eval in addon-actions

[igor-dv]

Nice! But what is the bundle size now ?

[Hypnosphi]

For cra-kitchen-sink, it's 3.2M vs 2.9M on release/3.3 (but mangling is disabled there as well)

[danielduan]

This feels like something that's valuable for us to get merged.

[evan-scott-zocdoc]

uglifyjs-webpack-plugin v1 is out, which has full ES6+ support btw. https://github.com/webpack-contrib/uglifyjs-webpack-plugin

[ndelangen]

Latest stats:

before 'mangle'

manager = 1.915.735 bytes (1,9 MB on disk)
preview = 206.408 bytes (209 KB on disk)
vendor = 966.175 bytes (967 KB on disk)

after 'mangle'

manager = 1.332.127 bytes (1,3 MB on disk)
preview = 118.647 bytes (119 KB on disk)
vendor = 698.993 bytes (700 KB on disk)

[danielduan]

@ndelangen you mean mangle right?

I still don't think we should be using mangle but anything else we can do to get the bundle size down is a plus for me.

[Hypnosphi]

I'd prefer to keep avoiding mangling. Even in the case of static build, storybook is still a developer tool, and debugging experience should be among top priorities. And I believe we actually display some original variable and function names in addons like info and actions.

[Hypnosphi]

@shilman is there anything else that should be done here in your opinion?

[Hypnosphi]

@ndelangen we need to apply the same changes to angular app

[ndelangen]

Putting this back into the freezer, gonna have a look at the uglify-webpack-plugin that was mentioned: #1733 (comment)

[ggarek]

@ndelangen Thank you for looking into this issue! Since i am also interested in this fix and i had some free time, i tried to use uglify-es.

Please, check it when you have time

[ndelangen]

Thank you @ggarek, I will close this PR in favour of yours!