Reduce size of bundle

[reichert621]

A couple things to try:

• find a bundle analyzer to let us know what dependencies are the largest
• try switching from react to preact
• remove all unused code!

Anything else?

[osdiab]

bundle analyzer: would source-map-explorer work?

Bundlephobia: https://bundlephobia.com/result?p=@papercups-io/[email protected]

looks pretty large, probably less than it actually is given tree-shaking. Is the library side-effect free? if so, would make sense to add that annotation to package.json.

Some thoughts on bundle size reduction:

• yeah, preact would make sense
• perhaps replacing emotion with something like compiled CSS in JS would remove its runtime: https://compiledcssinjs.com/
• Is framer + popmotion needed for the animations or can they be done equivalently with pure CSS?
• Is superagent needed or can this just use normal Fetch? not sure about backwards-compatibility requirements.

[reichert621]

het @osdiab! yep, framer and superagent can likely be removed in favor of pure CSS + fetch 👍

[osdiab]

at a minimum users can also configure on their own with webpack aliases that react imports get resolved by preact/compat, though it's less than ideal since things may not be 100% in-sync between them, potential for some bugs doing that. I'm not a user of papercups yet so I'm probably not going to invest the effort at the moment to make this contribution, but would do a lot to assuage my worries about adoption (and perhaps others too) if bundlephobia made it look nice and tiny!

Idk if this library is side-effect free but if it is would also help to put that annotation in package.json to assist tree-shaking and external tools like bundlephobia's es6 imports analysis.