Reduce client build (main.js) size
Opened this issue · 11 comments
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.
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.
I suggest also looking into webpack2 tree-shaking: http://www.2ality.com/2015/12/webpack-tree-shaking.html
Two suggestions:
- Uglify: #56 (7.64mb -> 3.04mb)
- 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.
You should also tell your server at orbit.libp2p.io to gzip files. That would bring main.js down to 833kb :)
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.
@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.
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.
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.
@haadcode how come it's larger now, than the last comment above?
it's been 4 years old issue, any updates?