regl-project / regl

👑 Functional WebGL
https://regl-project.github.io/
MIT License
5.21k stars 322 forks source link

Size optimization #118

Open mikolalysenko opened 8 years ago

mikolalysenko commented 8 years ago

regl is starting to get a little fat. It is probably worth it to do an audit of the minified code and optimize things.

Some ideas:

milcktoast commented 8 years ago

Is it completely out of the question to use ES rather than commonJS modules? Using something like https://github.com/rollup/rollup to compile the distributable module will save space as well as improve initialization performance. This is the route Three.js is going (https://github.com/mrdoob/three.js/pull/9310). cc @Rich-Harris

mourner commented 7 years ago

I second the Rollup suggestion — it's wonderful.

vorg commented 7 years ago

How does rollup would help here? regl doesn't have any 3rd party dependencies so is there anything that would be skipped during three shaking?

Rich-Harris commented 7 years ago

As an enthusiastic regl user I'd be more than happy to help out with a conversion to ES modules.

@vorg Tree-shaking is an overstated benefit in many cases – the real benefits come from what has been termed 'scope hoisting'. With ES modules you don't need to wrap each module in a function and put it in a central cache; instead, everything lives in the same scope. You end up with a good deal less code (no per-bundle cost of including a require implementation, or per-module cost of function wrapper + require statements, etc) which is inherently more minifiable (because more things are variables rather than unmangleable properties of exports), and the real-world evidence is that parse time is considerably reduced by this approach.

You can get a feel for the sort of code Rollup generates here or using the interactive demo.

mikolalysenko commented 7 years ago

I'm open to trying some stuff out. We've got benchmarks regarding size reductions so whatever works and makes it smaller I'm game for.

Rich-Harris commented 7 years ago

I put my money where my mouth is, if anyone on this thread is interested --> https://github.com/regl-project/regl/pull/364