React-router: Rollup bundle sizes

[pshrmn]

Version

v4.4.0-beta.2

I was just looking at the build sizes on unpkg and they are much bigger than I expected.

For the ES/CJS builds, I believe that all dependencies should be considered externals. With Curi, I import the dependencies from package.json and pass the package names to Rollup as externals.

The UMD builds also grew from beta 1 to beta 2, but I'm not sure about the cause for that.

There is also a great Rollup plugin that I have been using to see bundle sizes: rollup-plugin-size-snapshot.

[mjackson]

Thanks for being so vigilant, @pshrmn. I still need to go through the builds and see everything that is actually being included. It's definitely on my TODO list before 4.4 final.

I noticed that React has a mode where you can force all builds to be human-readable. I'd like to do something like that here as well to make it a little easier to scan through our production bundles and figure out how we can whittle them down.

[mjackson]

/cc @TrySound who offered to help us simplify the build and has also done some significant work generating ESM builds for react-is

[TrySound]

I added size snapshot here.
https://github.com/ReactTraining/react-router/pull/6395

After merge I can send PRs with optimisations.

[mjackson]

Thanks, @TrySound. Merged.

[henryqdineen]

I'm loving these v4.4 betas but we are also running into bundle size issues unfortunately.

For our custom setup it would be preferred if we could externalize at least prop-types, history, create-react-context, hoist-non-react-statics and path-to-regexp. Let me know if there is any way I can help.

[TrySound]

It's coming in my next pr, dont worry

[mjackson]

If we externalize all that stuff, it'll technically be a breaking change since we have historically bundled all our deps. We can't ask everyone to install all that stuff as peer dependencies, can we?

[TrySound]

@mjackson No, you don't bundle anything.
https://unpkg.com/[email protected]/es/index.js

UMD is not used by bundlers so it's good to have a few small dependencies bundled in it. But cjs and esm should be free from bundled deps to share them with other dependencies.

[timdorr]

For some inspiration, we mark all our deps and devDeps as external in our rollup config automatically: https://github.com/reduxjs/redux/blob/master/rollup.config.js#L13-L16

We do this for CJS and ES builds. But for our .mjs (new!) and UMD builds, we bundle everything in. The exception here would be the react module, since it's generally expected to be externally available.

[mjackson]

Ah, sorry. I was mixing up the CJS and UMD builds. You're right, @TrySound, we shouldn't be bundling anything in our CJS + ESM builds. That was an oversight on my part.

Did you still want to do some more work here? Or can we close?

[timdorr]

I think we did it. High five! ✋