Replace UglifyJS with babel-minify #1733

ndelangen · 2017-08-24T21:43:22Z

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)

UglifyJS does not support any ES6 whatsoever. We want to allow users to set their own target env.

ndelangen · 2017-08-24T21:44:30Z

codecov · 2017-08-24T21:49:11Z

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 · 2017-08-24T22:22:39Z

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 · 2017-08-25T06:31:15Z

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

…inify

usulpro · 2017-08-25T18:21:44Z

got 87 sec today!

usulpro

I'd love to have it merged

ndelangen · 2017-08-25T21:28:33Z

I want someone to verify react-native other then me

tmeasday · 2017-08-26T12:07:37Z

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

…inify

tmeasday · 2017-08-27T11:21:59Z

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?

…inify

ndelangen · 2017-08-27T20:40:19Z

@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?

…inify

Hypnosphi · 2017-10-01T10:39:11Z

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

igor-dv · 2017-10-01T11:09:57Z

In Chrome and FF

Hypnosphi · 2017-10-01T15:24:02Z

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

…inify

Hypnosphi · 2017-10-01T21:31:29Z

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

igor-dv · 2017-10-01T21:34:43Z

Nice! But what is the bundle size now ?

…inify

Hypnosphi · 2017-10-01T21:56:48Z

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

…inify

danielduan · 2017-10-31T17:21:12Z

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

evan-scott-zocdoc · 2017-11-09T23:31:42Z

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

…inify # Conflicts: # yarn.lock

ndelangen · 2017-11-16T07:06:36Z

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 · 2017-11-16T16:23:21Z

@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.

…inify

Hypnosphi · 2017-11-17T23:18:25Z

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 · 2017-11-17T23:19:23Z

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

Hypnosphi · 2017-11-17T23:32:11Z

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

ndelangen · 2017-11-18T23:43:27Z

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

ggarek · 2017-12-22T07:23:09Z

@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 · 2017-12-22T07:28:05Z

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

SWITCH UglifyJS for Babel-Minify

7def915

UglifyJS does not support any ES6 whatsoever. We want to allow users to set their own target env.

ndelangen added react react-native vue configuration babel / webpack labels Aug 24, 2017

ndelangen self-assigned this Aug 24, 2017

ndelangen requested review from kazupon, tmeasday, shilman, Gongreg and usulpro August 24, 2017 21:43

Merge branch 'master' into ndelangen/replace-uglify-with-babel-minify

100f8f7

ndelangen changed the base branch from master to release/3.3 August 24, 2017 21:45

Gongreg approved these changes Aug 25, 2017

View reviewed changes

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

6fcf9d3

…inify

usulpro approved these changes Aug 25, 2017

View reviewed changes

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

c25d3d3

…inify

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

ce700b4

…inify

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

93cff8b

…inify

tmeasday mentioned this pull request Aug 31, 2017

build-storybook fails with storybook-addon-jsx #1774

Closed

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

da5dd93

…inify

ndelangen and others added 2 commits October 1, 2017 19:56

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

4efc197

…inify

Disable name mangling as it breaks addon-actions

231f0f2

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

c3ec7e2

…inify

Hypnosphi and others added 2 commits October 4, 2017 17:21

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

2b7810d

…inify

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

5046cd2

…inify

Hypnosphi mentioned this pull request Nov 15, 2017

Unexpected token delete with addon-actions #1123

Closed

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

fa59a3b

…inify # Conflicts: # yarn.lock

Merge branch 'release/3.3' into ndelangen/replace-uglify-with-babel-m…

8ba124d

…inify

Hypnosphi added this to the v3.3.0 milestone Nov 17, 2017

Update lockfile

4280d32

Hypnosphi removed this from the v3.3.0 milestone Nov 28, 2017

ggarek mentioned this pull request Dec 22, 2017

Switch to UglifyJS that supports ES6 and up #2530

Merged

ndelangen closed this Dec 22, 2017

Hypnosphi deleted the ndelangen/replace-uglify-with-babel-minify branch February 17, 2018 13:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace UglifyJS with babel-minify #1733

Replace UglifyJS with babel-minify #1733

ndelangen commented Aug 24, 2017

ndelangen commented Aug 24, 2017

codecov bot commented Aug 24, 2017 •

edited

Loading

usulpro commented Aug 24, 2017 •

edited

Loading

ndelangen commented Aug 25, 2017

usulpro commented Aug 25, 2017

usulpro left a comment

ndelangen commented Aug 25, 2017

tmeasday commented Aug 26, 2017

tmeasday commented Aug 27, 2017

ndelangen commented Aug 27, 2017

Hypnosphi commented Oct 1, 2017

igor-dv commented Oct 1, 2017

Hypnosphi commented Oct 1, 2017 •

edited

Loading

Hypnosphi commented Oct 1, 2017

igor-dv commented Oct 1, 2017

Hypnosphi commented Oct 1, 2017

danielduan commented Oct 31, 2017

evan-scott-zocdoc commented Nov 9, 2017

ndelangen commented Nov 16, 2017 •

edited

Loading

danielduan commented Nov 16, 2017

Hypnosphi commented Nov 17, 2017

Hypnosphi commented Nov 17, 2017

Hypnosphi commented Nov 17, 2017

ndelangen commented Nov 18, 2017

ggarek commented Dec 22, 2017 •

edited

Loading

ndelangen commented Dec 22, 2017

Replace UglifyJS with babel-minify #1733

Replace UglifyJS with babel-minify #1733

Conversation

ndelangen commented Aug 24, 2017

How to test

What about bundle size?

ndelangen commented Aug 24, 2017

codecov bot commented Aug 24, 2017 • edited Loading

Codecov Report

usulpro commented Aug 24, 2017 • edited Loading

ndelangen commented Aug 25, 2017

usulpro commented Aug 25, 2017

usulpro left a comment

Choose a reason for hiding this comment

ndelangen commented Aug 25, 2017

tmeasday commented Aug 26, 2017

tmeasday commented Aug 27, 2017

ndelangen commented Aug 27, 2017

Hypnosphi commented Oct 1, 2017

igor-dv commented Oct 1, 2017

Hypnosphi commented Oct 1, 2017 • edited Loading

Hypnosphi commented Oct 1, 2017

igor-dv commented Oct 1, 2017

Hypnosphi commented Oct 1, 2017

danielduan commented Oct 31, 2017

evan-scott-zocdoc commented Nov 9, 2017

ndelangen commented Nov 16, 2017 • edited Loading

before 'mangle'

after 'mangle'

danielduan commented Nov 16, 2017

Hypnosphi commented Nov 17, 2017

Hypnosphi commented Nov 17, 2017

Hypnosphi commented Nov 17, 2017

ndelangen commented Nov 18, 2017

ggarek commented Dec 22, 2017 • edited Loading

ndelangen commented Dec 22, 2017

codecov bot commented Aug 24, 2017 •

edited

Loading

usulpro commented Aug 24, 2017 •

edited

Loading

Hypnosphi commented Oct 1, 2017 •

edited

Loading

ndelangen commented Nov 16, 2017 •

edited

Loading

ggarek commented Dec 22, 2017 •

edited

Loading