Bundle Size and Bundling

[ricokahler]

This issue is to track to two things:

• bundle size
• how we bundle

bundle size

The bundle size in ReSift is not great, I think it's acceptable but we could do better.

According to bundlephobia, ReSift is 13.9kB minified and zipped.

However, we currently require two peer deps, redux 2.6kB and react-redux 5.5kB brining the total footprint of ReSift to around ~22kB (given that you're not already using react + react-redux).

Here is the result of running webpack-bundle-analyzer (without redux or react-redux):

My biggest takeaways:

• superagent (http client) eats up too much of the budget. Bundlephobia says it's 6.2kB. If we remove that and replace it with a simpler XHR equivalent, we'll reduce the bundle by nearly 50%. Note that we can't replace Superagent with window.fetch because ReSift needs the ability to cancel the request.
• shortid 1.1kB can probably be swapped out with nanoid 0.3kB very easily
• useStatus on our side is relatively large and can be reduced in size easily

If we do those, we can shave off 7-8kB off the bundle taking the ReSift core bundle (without Redux) to be around 6.4kB and with Redux, around 14.5kB.

I think these items are a good first iteration goal of reducing bundle size. There will be more investigation of removing redux and react-redux for the purposes of concurrent mode in #32 but for now, I don't think removing redux is worth focusing on for a stable release.

how we bundle

we currently bundle using webpack with the library option of UMD. My current understand is that this way of bundling does not support tree-shaking (though in reality, you'll probably end up using all of ReSift so tree shaking is somewhat irrelevant).

I know other libraries like react-router use rollup. I'd like to switch as well. In general, we just need a bundling audit.

[ricokahler]

I'm experimenting heavily in the concurrent mode branch:

• I removed superagent in favor of a pure XMLHTTPRequest implementation
• I replaced shortid with nanoid, and
• I removed redux and react-redux in favor of use-context-selector
• I removed some modules that wouldn't be needed with context, suspense, and concurrent mode

The full footprint is now 8.1kB minified and gzip 🎉

The future is looking bright! Next gen ReSift will be smaller and I'm sure we can shave off another 3kB. My targeted budget is 5kB.

[ricokahler]

I've been playing around with rollup and I have to say it's significantly better for bundling. It produces much cleaner outputs and supports ESM bundles which are tree-shakable. I'll definitely bundle v0.2.0 with rollup

Edit: bundle now uses rollup