Optimize: Reduce Bundle Size Further

[mithi]

Using only a partial bundle of Plotly reduced the bundle size by 50%. Right now, Plotly still occupies 75% of the bundle. https://github.com/mithi/hexapod/issues/54

Other things that we can try:

• [x] Remove MathJS as dependency and just write all the matrix multiplications from scratch
• [x] Remove ReactMarkdown and just write them in html
• [x] Figure out if react-icons is taking up more space than it should
• [x] Check if it's a good idea to use preact and eject

Related Links

Eject

• https://codeburst.io/how-i-cut-my-react-javascript-bundle-size-in-half-with-three-lines-of-code-fe7798ecbd3f

Preact

• https://preactjs.com/guide/v10/switching-to-preact

Codesplitting

• https://reactjs.org/docs/code-splitting.html
• https://www.emgoto.com/react-bundles-and-code-splitting/

Importing only one icon from react-icon

• https://hackernoon.com/lets-make-our-bundle-size-even-smaller-7a5727bb110

[mithi]

Bundle-size reduced by about 10 percent when mathjs was removed

See https://github.com/mithi/hexapod/issues/77

[mithi]

Started with

After using partial plotly bundle

After removing mathjs

[icyJoseph]

I have a branch where React Markdown has been removed and the Pages are split into a bundle of its own.

Which ends up at roughly 1.76 MB, as follows, with 7.3ea032e0.chunk.js being Plotly D3, which is dynamically loaded, so it doesn't block first paint. The other main bundle 6.3db6acf1.chunk.js is the react-plotly.js/factory module, also dynamically loaded.

4096	build/precache-manifest.9260a653dee23e8e967e8f2a9c3bc098.js
4096	build/static/js/Landing.da6e3571.chunk.js
4096	build/static/js/FwdKinematics.f7b1e2d0.chunk.js
4096	build/static/js/runtime-main.7c59d658.js
4096	build/static/js/InvKinematics.1f0dbfd6.chunk.js
1474560	build/static/js/7.3ea032e0.chunk.js
188416	build/static/js/6.3db6acf1.chunk.js
4096	build/static/js/LegPattern.65248188.chunk.js
49152	build/static/js/main.0d6601bf.chunk.js
8192	build/static/js/8.e4f8fe4a.chunk.js
8192	build/static/css/main.1739d554.chunk.css
4096	build/service-worker.js
4096	build/index.html
1761280	total

Compared to running on master as of now, which ends up at 1.79MB, big win yay!

4096	build/precache-manifest.2b3e83a9c10cab01a0fa7334d2b6b0bf.js
1724416	build/static/js/2.2d4e33b3.chunk.js
4096	build/static/js/runtime-main.d4e56be3.js
49152	build/static/js/main.384eb958.chunk.js
8192	build/static/css/main.25fbfe7e.chunk.css
4096	build/service-worker.js
4096	build/index.html
1798144	total

The biggest win is that you can paint the first screen faster. Next step, though not blocked by this, would be to enable the service worker and have a sound offline mode.

I still need to do some work on the PR, but might come up soon.

[mithi]

@icyJoseph , thanks! Because I've merged your PR multiple times, I'll like to add you at the bottom of this repo's README as one of the main contributors. I'd do this if that's alright with you :)

[icyJoseph]

Oh thank you! Like I said before I really like this project! So yeah, that's alright!