Babel7 #590

TrySound · 2018-06-28T10:08:41Z

esm bundle is slightly increased but as we can see user bundle in the end will be smaller.

TrySound · 2018-06-28T10:20:17Z

Hm.. now everything became smaller. First commit should be starting point in diff.

alexreardon · 2018-06-28T10:30:38Z

Is it stripping the second invariant argument? Eg that Babel dev plugin?

On Thu, 28 Jun 2018 at 8:20 pm, Bogdan Chadkin ***@***.***> wrote: Hm.. now everything became smaller. First commit should be starting point in diff. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#590 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7bDZxG_Y2F7BaWQXMpIXCYk-rUa6ks5uBK3jgaJpZM4U7HBY> .

alexreardon

33 down to 23 is great!

TrySound · 2018-06-28T10:31:59Z

Nope. I didn't strip anything. Just played with babel configuration.

TrySound · 2018-06-28T10:34:30Z

Let's strip invariant in the next PR.

alexreardon · 2018-06-28T10:37:29Z

Sure

…

On Thu, 28 Jun 2018 at 8:34 pm, Bogdan Chadkin ***@***.***> wrote: Let's strip invariant in the next PR. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#590 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7R9XZo__Zo0SbJGFgRm7nOiX_-eqks5uBLE4gaJpZM4U7HBY> .

alexreardon · 2018-06-28T23:32:32Z

storybook only looks for a root .babelrc and not a .babelrc.js. We will be moving away from storybook soon so i went for a super simple option: adding a custom .babelrc to the .storybook folder which is just a match of our .babelrc.js

alexreardon · 2018-06-28T23:46:34Z

.size-snapshot.json

@@ -1,21 +1,26 @@
 {
  "dist/react-beautiful-dnd.js": {
-    "bundled": 391074,


is this the diff on the dev branch on from master?

Could you please let me know:

what the change in numbers is between the current dev and this branch? Ie how many kbs do we loose moving to babel 7

could you also compare this again the current master? I will put these figures in the release notes

You can compare the last commit against the first commit in this PR. The first one is only snapshot update.

{ "dist/react-beautiful-dnd.js": { - "bundled": 380027, - "minified": 143820, - "gzipped": 40855 + "bundled": 356054, + "minified": 134070, + "gzipped": 37695 }, "dist/react-beautiful-dnd.min.js": { - "bundled": 343989, - "minified": 130858, - "gzipped": 36610 + "bundled": 320016, + "minified": 121108, + "gzipped": 33429 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 180665, - "minified": 91821, - "gzipped": 23548, + "bundled": 179908, + "minified": 90873, + "gzipped": 23472, "treeshaked": { "rollup": { - "code": 76262, - "import_statements": 874 + "code": 75679, + "import_statements": 733 }, "webpack": { - "code": 78237 + "code": 77480 } } } }

Here's against master

{ "dist/react-beautiful-dnd.js": { - "bundled": 400269, - "minified": 151652, - "gzipped": 43139 + "bundled": 356054, + "minified": 134070, + "gzipped": 37695 }, "dist/react-beautiful-dnd.min.js": { - "bundled": 358556, - "minified": 134751, - "gzipped": 38201 + "bundled": 320016, + "minified": 121108, + "gzipped": 33429 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 177759, - "minified": 89807, - "gzipped": 22649, + "bundled": 179908, + "minified": 90873, + "gzipped": 23472, "treeshaked": { - "rollup": 78288, + "rollup": { + "code": 75679, + "import_statements": 733 + }, - "webpack": 80060 + "webpack": { + "code": 77480 + } } } }

just so i understand - if a user has no shared deps with the library then they take the 179kb bundle size. If they already have all the deps they get 75kb. Is that correct?

Not quite. Bundled, minified, gzipped are sizes of what we provide in rollup config + terser + gzip.

So in production the library size with dependencies will be 121KB to parse and 33KB to load (minified umd).

If user already have all dependencies then the size will be 90KB to parse and 23KB to load subtract development stuff like process.env.NODE_ENV (size snapshot provides production replacement only for treeshaked size)

Treeshaked size doesn't make a lot of sense for this library because as you said there is nothing unused.

I think it would be interesting to know what the lowest possible size gzip could be. Ie: if with process.env.NODE_ENV === production and with all dependencies de duplicated.

Don't need to do this here though!

I am still a confused by this:

"treeshaked": { - "rollup": 78288, + "rollup": { + "code": 75679, + "import_statements": 733 + }, - "webpack": 80060 + "webpack": { + "code": 77480 + } }

And how it relates to the other numbers

alexreardon · 2018-06-28T23:46:54Z

.size-snapshot.json

-    "gzipped": 37985
+    "bundled": 320016,
+    "minified": 121108,
+    "gzipped": 33429
  },
  "dist/react-beautiful-dnd.esm.js": {


can you please explain the numbers in this section a little bit more? I am a bit confused

treeshaked code means bundle with this entry point import {} from 'library' which is nothing imported. The result is treeshakability, how much code is left after removing unused code.

import_statements is how many bytes imports of externals takes in the code. It's useful when you want to achieve full treeshakability so other libraries could use this one without worrying about user bundle bloat.

Why is the numbers in the tree shaked section bigger than the UMD builds? I would have thought the UMD would be far bigger as it includes the dependencies...?

Treeshaked size is not gzipped. If you will see at minified sizes they are all bigger than treeshaked one.

So without being able to dedupe anything the esm cost is 23472kb?

Yes + vendors.

23472kb is the size without vendors and without production replacements

…abel7

alexreardon · 2018-06-29T10:34:56Z

Vendors = externals?

…

On Fri, 29 Jun 2018 at 8:11 pm, Bogdan Chadkin ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In .size-snapshot.json <#590 (comment)> : > }, "dist/react-beautiful-dnd.min.js": { - "bundled": 353559, - "minified": 135149, - "gzipped": 37985 + "bundled": 320016, + "minified": 121108, + "gzipped": 33429 }, "dist/react-beautiful-dnd.esm.js": { 23472kb is the size without vendors and without production replacements — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#590 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7YuzEilGTfp-mwG6vL3QFRf9vAhDks5uBf1WgaJpZM4U7HBY> .

TrySound · 2018-06-29T10:35:49Z

Yes. Everything in node_modules

alexreardon · 2018-06-29T10:45:33Z

So 23kb is just our code. Ie no redux, react motion? But then how is our UMD build about the same, which I thought had the dependencies in it

…

On Fri, 29 Jun 2018 at 8:35 pm, Bogdan Chadkin ***@***.***> wrote: Yes. Everything in node_modules — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#590 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7WUTimsN56aIcm0t3r4BYSrknab8ks5uBgMHgaJpZM4U7HBY> .

TrySound · 2018-06-29T10:49:01Z

Not the same

production umd
minified: 121108
gzipped: 33429

esm
minified: 90873
gzipped: 23472

alexreardon · 2018-06-29T11:08:36Z

This is a great win from this PR:

"dist/react-beautiful-dnd.min.js": {
-    "bundled": 343989,
-    "minified": 130858,
-    "gzipped": 36610
+    "bundled": 320016,
+    "minified": 121108,
+    "gzipped": 33429
  },

3kb in the gzip for moving to the new babel. niace

alexreardon · 2018-06-29T11:08:49Z

Well done @TrySound !!!!

TrySound added 5 commits June 28, 2018 11:18

Fix uglify and update size snapshot

b141add

Upgrade to babel7

396063e

Enable loose mode for class properties

e1233a9

Enable loose mode for object rest spread

73e10ca

Provide esm babel helpers for esm bundle

f274892

alexreardon reviewed Jun 28, 2018

View reviewed changes

TrySound and others added 4 commits June 28, 2018 14:22

Ignore puppeteer test

66f46b7

adding babelrc just for the storybook

3561f1d

adding some notes about the storybook setup

8b978c2

renaming readme

8024eab

alexreardon reviewed Jun 28, 2018

View reviewed changes

alexreardon added 3 commits June 29, 2018 09:52

Merge branch 'dev' of github.com:atlassian/react-beautiful-dnd into b…

968f875

…abel7

Merge branch 'dev' of github.com:atlassian/react-beautiful-dnd into b…

71d6146

…abel7

updating lock file

6a308e0

alexreardon merged commit 33c616e into atlassian:dev Jun 29, 2018

TrySound deleted the babel7 branch June 29, 2018 11:24

alexreardon mentioned this pull request Jul 2, 2018

Fix rollup UMD bundle size regression #447

Closed

alexreardon mentioned this pull request Aug 30, 2018

bumping flow and friends #771

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Babel7 #590

Babel7 #590

TrySound commented Jun 28, 2018

TrySound commented Jun 28, 2018

alexreardon commented Jun 28, 2018 via email

alexreardon left a comment

TrySound commented Jun 28, 2018 •

edited

Loading

TrySound commented Jun 28, 2018

alexreardon commented Jun 28, 2018 via email

alexreardon commented Jun 28, 2018

alexreardon Jun 28, 2018

alexreardon Jun 29, 2018

alexreardon Jun 29, 2018

TrySound Jun 29, 2018

TrySound Jun 29, 2018

alexreardon Jun 29, 2018

TrySound Jun 29, 2018

alexreardon Jun 29, 2018

alexreardon Jun 29, 2018

alexreardon Jun 29, 2018 •

edited

Loading

alexreardon Jun 28, 2018

TrySound Jun 29, 2018

alexreardon Jun 29, 2018

TrySound Jun 29, 2018

alexreardon Jun 29, 2018

alexreardon Jun 29, 2018

TrySound Jun 29, 2018

alexreardon Jun 29, 2018

TrySound Jun 29, 2018

alexreardon commented Jun 29, 2018 via email

TrySound commented Jun 29, 2018

alexreardon commented Jun 29, 2018 via email

TrySound commented Jun 29, 2018

alexreardon commented Jun 29, 2018

alexreardon commented Jun 29, 2018

Babel7 #590

Babel7 #590

Conversation

TrySound commented Jun 28, 2018

TrySound commented Jun 28, 2018

alexreardon commented Jun 28, 2018 via email

alexreardon left a comment

Choose a reason for hiding this comment

TrySound commented Jun 28, 2018 • edited Loading

TrySound commented Jun 28, 2018

alexreardon commented Jun 28, 2018 via email

alexreardon commented Jun 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexreardon Jun 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexreardon commented Jun 29, 2018 via email

TrySound commented Jun 29, 2018

alexreardon commented Jun 29, 2018 via email

TrySound commented Jun 29, 2018

alexreardon commented Jun 29, 2018

alexreardon commented Jun 29, 2018

TrySound commented Jun 28, 2018 •

edited

Loading

alexreardon Jun 29, 2018 •

edited

Loading