Optimize bundle sizes 🚀 #40

emmenko · 2018-09-12T08:19:18Z

Currently our bundle sizes are ~2M. 🙃

Those changes will reduce the bundle sizes by 75% 🎉

$ ll dist/ui-kit*
-rw-r--r--  1 emmenko  staff   469K 12 Sep 10:07 dist/ui-kit.cjs.js
-rw-r--r--  1 emmenko  staff   560K 12 Sep 10:07 dist/ui-kit.esm.js

Notable changes:

define dependencies as external (so they won't be bundled)
make react-select a peerDependencies (even though it was also defined as external, it was injecting "a lot of crap" into the bundle)
lodash.mapvalues is supposed to be a dependency
uglify the CJS bundle (there is also an additional command build:dev to generated the bundles without uglify, useful for inspecting the bundle)
removed uuid and replaced it with Math.random

tdeekens

Thanks a ton. Looks sharp to me. I'd recommend adding 1-2 more comments (even though we have some already) with a reference to the article before merging.

tdeekens · 2018-09-12T08:27:06Z

rollup.config.js

+      file: `dist/${pkg.module}`,
+      format: 'esm',
+    },
+    external: Object.keys(pkg.dependencies).concat(pkg.peerDependencies),


I'd dump a comment and a ref to the article on top. Otherwise it feels like natural to remove this in 1-2 years :)

Which article?

https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953

tdeekens · 2018-09-12T08:27:59Z

src/components/fields/text-field/text-field.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import has from 'lodash.has';
-import uuid from 'uuid';


Did we remove it from the pkg.json too? I can't see that change.

It wasn't there in the first place 🤷‍♂️

Then I'd recommend using depcheck on the package once. It's awesome and is how I managed to clean up the deps on the mc-fe without much manual work.

tdeekens · 2018-09-12T08:28:41Z

rollup.config.js

+  {
+    input: 'src/index.js',
+    output: {
+      file: `dist/${pkg.main}`,


This is clever.

tdeekens · 2018-09-12T08:29:41Z

rollup.config.js

+  }),
+  resolve(),
+  svgrPlugin({
+    include: ['**/*.react.svg'],


Maybe a comment for others that this is our way of targeting svgs which mean to become react components?

tdeekens · 2018-09-12T08:30:42Z

rollup.config.js

+  // this is used for importing both vendor css (from node_modules) and for
+  // importing our global css which uses tokens that require postcss plugins
+  // (such as color-mod) to be compiled properly.
+  postcss({


Hah, the good times of inverse exclude/include rules :).

dferber90

The error messages during the build are gone as well, nice 💯

src/components/fields/text-field/text-field.js

dferber90 · 2018-09-12T08:56:34Z

rollup.config.js

-      }),
-      execute('node scripts/bundle-copy.js'),
+      ...basePlugins,
+      ...(process.env.NODE_ENV === 'production' ? [uglify()] : []),


I would let rollup always bundle for production only. If you want to debug, I'd make make the person debugging uncomment this.

I'd do this to avoid confusion like "why are we even checking the env" when reading this file.

But I'm also fine with keeping it the way it is and accepting the slight confusion for the convenience. Or maybe add a comment.

dferber90 · 2018-09-12T08:58:17Z

rollup.config.js

+      file: `dist/${pkg.module}`,
+      format: 'esm',
+    },
+    external: Object.keys(pkg.dependencies).concat(pkg.peerDependencies),


Which article?

This factory is better than random numbers as we can ensure the ids in tests, and it guarantees unique ids, which ids based on random numbers would not have.

emmenko · 2018-09-12T09:32:50Z

rollup.config.js

+  // so that they do not end up in the bundle.
+  // See also https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
+  peerDepsExternal({
+    includeDependencies: true,


FYI: I found out that this does exactly the same as manually doing

external: Object.keys(pkg.dependencies).concat(Object.keys(pkg.peerDependencies))

montezume · 2018-09-12T09:37:54Z

rollup.config.js

@@ -36,72 +44,104 @@ const postcssPlugins = [
  postcssReporter(),
 ];

-export default [
+// This list includes common plugins shared between each output format.
+// The list is sorted alphabetically.


why sorted alphabetically? It's important that we have the correct order.

montezume · 2018-09-12T09:38:18Z

rollup.config.js

+  // To automatically externalize `dependencies` and `peerDependencies`
+  // so that they do not end up in the bundle.
+  // See also https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
+  peerDepsExternal({


peer deps external should go first. ref

montezume

I don't like the idea of ordering plugins alphabetically...

montezume · 2018-09-12T09:40:01Z

Can you at least explain why you reordered the plugins?

montezume

Thanks!

emmenko added 2 commits September 12, 2018 08:58

chore: do not bundle dependencies

d8444d2

build: reduce bundle size

c526090

emmenko added 🙏Status: Code Review 🔮 Type: Chore labels Sep 12, 2018

emmenko requested review from dferber90, tdeekens and montezume September 12, 2018 08:19

tdeekens approved these changes Sep 12, 2018

View reviewed changes

dferber90 approved these changes Sep 12, 2018

View reviewed changes

emmenko and others added 2 commits September 12, 2018 11:24

chore(rollup): document things

22fd2f2

feat: add sequentialId factory

0b9cf93

This factory is better than random numbers as we can ensure the ids in tests, and it guarantees unique ids, which ids based on random numbers would not have.

emmenko commented Sep 12, 2018

View reviewed changes

montezume reviewed Sep 12, 2018

View reviewed changes

montezume suggested changes Sep 12, 2018

View reviewed changes

emmenko mentioned this pull request Sep 12, 2018

Remove proxy exports 🙌 #42

Merged

chore(rollup): fix ordering of plugins

5f8ec74

montezume approved these changes Sep 12, 2018

View reviewed changes

emmenko merged commit d4b169c into master Sep 12, 2018

emmenko deleted the nm-optimize-bundle-sizes branch September 12, 2018 12:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimize bundle sizes 🚀 #40

Optimize bundle sizes 🚀 #40

emmenko commented Sep 12, 2018 •

edited by dferber90

Loading

tdeekens left a comment

tdeekens Sep 12, 2018

dferber90 Sep 12, 2018

emmenko Sep 12, 2018

tdeekens Sep 12, 2018

emmenko Sep 12, 2018

tdeekens Sep 12, 2018

tdeekens Sep 12, 2018

tdeekens Sep 12, 2018

tdeekens Sep 12, 2018

dferber90 left a comment

dferber90 Sep 12, 2018

dferber90 Sep 12, 2018

emmenko Sep 12, 2018 •

edited

Loading

montezume Sep 12, 2018

montezume Sep 12, 2018

montezume left a comment

montezume commented Sep 12, 2018

montezume left a comment

Optimize bundle sizes 🚀 #40

Optimize bundle sizes 🚀 #40

Conversation

emmenko commented Sep 12, 2018 • edited by dferber90 Loading

tdeekens left a 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

Choose a reason for hiding this comment

dferber90 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmenko Sep 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

montezume left a comment

Choose a reason for hiding this comment

montezume commented Sep 12, 2018

montezume left a comment

Choose a reason for hiding this comment

emmenko commented Sep 12, 2018 •

edited by dferber90

Loading

emmenko Sep 12, 2018 •

edited

Loading