Font Packing Optimisations

[jacobp100]

So I was optimizing my build of mathjax for an app, and spent some time looking at how fonts are packaged

Currently the metrics data, the SVG path data, and the unicode character are split into three files, and then combined into two fonts at runtime. However, this is really optimizing for the case where the user is exporting to both SVG and chtml in the same page

This splitting adds overhead: you need to duplicate a good amount of the structure of the font when it's split out into this way, you need to include runtime code, and you also need to run the runtime code

We could make two versions of each font, one for SVG and one for chtml

Another optimization we could do is to JSON.stringify these structures at build time and then JSON.parse the strings at runtime - which counter-intuitively speeds up parse time (Chrome Labs Benchmark). We an actually do this regardless of if we combine the font file structures. Webpack does this automatically for any .json file

So in my project, I target only SVG, and I stubbed a most of the font files out with null-loaderMy bundle size before these optimizations was 1.8MB. I did these two optimizations brought this down to 1.5MB - a 300kb reduction. This would have also been a bigger reduction if I had included all the fonts