search

holodex / app

http://holodex.enspiral.com
GNU Affero General Public License v3.0
24 stars 1 forks source link

reduce the size of the browser code #56

Closed ahdinosaur closed 8 years ago

ahdinosaur commented 9 years ago

the browser bundle is too damn big

this isn't a huge priority, but i think it's something we should keep in mind if we want Holodex to be accessible to as many people as possible. the size will certainly move up and down with changes, so this issue is more about how we can take size snapshots and a reflection on the current size snapshot.

right now, our current (refactor-api branch) minified bundle size is 911.87 kB, which after gzip is 209.61 kB.

npm i -g pretty-bytes
npm run build
cat src/assets/bundle.js | wc -c | pretty-bytes
cat src/assets/bundle.js | gzip | wc -c | pretty-bytes

most of these bytes are not from our own code, it's from our dependencies. we can nicely visualize our dependencies with disc, which allows us to browse the true size of Holodex here.

npm i -g disc
./node_modules/.bin/browserify . --full-paths | ./node_modules/.bin/uglifyjs > src/assets/bundle.js
discify src/assets/bundle.js curl -sT- https://htmlb.in

some random notes on our current dependencies:

these are open questions, i don't have any answers, nor is this really a big deal right now. :mouse2:

ahdinosaur commented 9 years ago

realistically, this should not be our focus.

development is a three stage process:

  1. make it work
  2. make it beautiful
  3. make it fast

we should be cycling most between 1 and sometimes 2, only 3 if necessary.

simontegg commented 9 years ago

++ to your last comment.

Regarding ngraph, there's lots of pretty examples, but I'm more interested in stable examples. I strongly believe a graph-based UI needs stability (no matter what data is thrown at it) to be feasible.

Its probably possible to get ngraph.forcelayout to stabilise for particular examples, this is close. But this is too unstable for my liking.

Unsure if this scales generically. Could look into it for later releases. Cola also has has other constraint optimisation features that could prove useful.

simontegg commented 9 years ago

Regarding virtual-dom,

Still feel a bit burnt by mercury ;). Doesn't look bad. If there's some easy lifecycle methods I could be convinced. relevant

simontegg commented 9 years ago

I think we can do a lot by modularising react-bootstrap and/or shifting to uour own components

ahdinosaur commented 9 years ago

I strongly believe a graph-based UI needs stability (no matter what data is thrown at it) to be feasible.

agreed. my main concern with webcola is about how we are maintaining a complicated fork that neither of us understand in order to use it. it works really well for now, but i wonder if we'd be better off using something less ideal and more simple to understand at this point. there's also a clear migration path if we go with the ngraph ecosystem, when we want to write a new layout engine we know what interface to write for and can easily swap out these subsystems.

Regarding virtual-dom,

if we moved to virtual-dom, we'd also be missing out on the heaps of React components available that we don't have to write.

I think we can do a lot by modularising react-bootstrap and/or shifting to uour own components

agreed, i don't think we really need bootstrap, we can easily pick and choose the components we need from the ecosystem.

ahdinosaur commented 9 years ago

ah, as an immediate step we can require the react-bootstrap components directly with require('react-bootstrap/ComponentName').

edit: woot, shaved off 85.19kB by doing the above.

ahdinosaur commented 9 years ago

useful tools for page speed metrics:

ahdinosaur commented 9 years ago

reduced the bundle by 15% by adding --screw-ie8 --mangle to uglifyjs.

simontegg commented 9 years ago

sweet

simontegg commented 9 years ago

If you set the NODE_ENV environment variable to 'production' when running browserify, a handful of React dev-only checks are stripped and the bumdle will be smaller. Also, you should make sure that you're minifying your bundle. React by itself is only 31k minified and gzipped, so your simple app shouldn't be much more than that.

https://groups.google.com/forum/#!topic/reactjs/Yr7QpI2vVfw