Reduce client build (main.js) size

[jbenet]

I went to orbit.libp2p.io on a pretty good network in Lisbon and it took a long time to work (at first i didn't know what was up). Turns out main.js is 7.5MB. Can we do something about load time? I don't feel very comfortable sending the link to people in non-great networks having this extra thing to explain.

To reduce the size, maybe:

• minify (it's not minified AFAICT)
• version-flatten or shed library deps?

To reduce loading time, maybe:

• progressive download? (instead of one big bundle, pull in pieces as needed?)
• have a loading bar? or loading animation, that's clear about total size downloaded?
• load it

Maybe notify users of download size? it's important to let users know a large download is happening, because some people in mobile networks may pay through the nose per MB.

[haadcode]

Yes! All of these. File size hasn't been a priority yet and given all the deps (js-ipfs in itself is huge) it's time to pay attention to it.

@claus had some ideas on this.

Will see what low hanging fruits there are and track the progress here.

[dignifiedquire]

I suggest also looking into webpack2 tree-shaking: http://www.2ality.com/2015/12/webpack-tree-shaking.html

[claus]

Two suggestions:

1. Uglify: https://github.com/haadcode/orbit/pull/56 (7.64mb -> 3.04mb)
2. Have Webpack split vendor code into separate bundles (js-ipfs related stuff into one, React into another maybe?) See https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code. This doesn't help with size, but with caching as the bulk of the code probably changes less frequently than Orbit related code.

[haadcode]

Merged https://github.com/haadcode/orbit/pull/56

[claus]

You should also tell your server at orbit.libp2p.io to gzip files. That would bring main.js down to 833kb :)

[haadcode]

Looking at the sources in branch devcon2 (latest dev branch), some potential modules to optimize:

app.js

• lodash (using full lodash atm, use individual modules)
• uportlib is huge
• lazy.js (not even used in the UI anymore?)
• highlight.js takes a lot of space

emojis.js

• react is included here (should not, already in app.js)
• lodash is included here (should not, already in app.js)

vendor.js

• react is included here (should not, already in app.js)
• lodash is included here (should not, already in app.js)
• highlights.js is included here (should not, already in app.js)

So, it looks like the vendoring is not setup correctly atm and bunch of libs are included multiple times in each output asset.

[dignifiedquire]

@haadcode I would suggest to use https://github.com/lodash/babel-plugin-lodash to only include the lodash things you want, without having to worry about it.

[haadcode]

With the latest updates to the build, we're looking at 2.1 Mb minified, not gzipped. There's still couple of low hanging fruits that I didn't fix yet, eg. not using full lodash lib.

[haadcode]

Update: as we moved repos, updated deps, got some proper releases for our tools (Webpack@2), we're now looking at 3.6MB distributable for https://github.com/orbitdb/orbit-web. This is minified and using Uglify2#harmony (upcoming version that minifies to ES6). With the uglifyjs version that comes with webpack2, I saw the build at ~2.7MB so there's a big difference between the two. However, we can't transpile js-ipfs with the webpack version of uglify, so this is where we're at for now.

As a side note, full lodash package removed and now using individual lodash functions/modules.

[dignifiedquire]

@haadcode how come it's larger now, than the last comment above?

[oknoorap]

it's been 4 years old issue, any updates?