Skip to content

Guide: reducing size of a mathjax installation

Jump to bottom Edit New page
pkra edited this page Jul 17, 2013 · 8 revisions

A topic that has come up multiple times on the MathJax User Group is how to reduce the MathJax footprint for "local" installations of MathJax, e.g., for inclusions in apps.

Even though every app will have it's own needs, we would like to document the process we went through for the recent inclusion of MathJax into Readium.

The goal of this documentation is to allow developers to include MathJax efficiently in their projects.

Getting the code from github.

To start from scratch, we grab a fresh MathJax copy from github; at time of writing this is the v2.0-latest branch.

git clone https://github.com/mathjax/MathJax/tree/v2.0-latest
git checkout -b v2.0latest origin/v2.0-latest

The directory structure

In your clone you should see the following content:

drwxrwxr-x 3 user user 4096 2012-03-28 09:57 config drwxrwxr-x 4 user user 4096 2012-03-28 09:57 docs drwxrwxr-x 4 user user 4096 2012-03-28 09:57 extensions drwxrwxr-x 3 user user 4096 2012-03-28 09:57 fonts drwxrwxr-x 2 user user 4096 2012-03-28 09:57 images drwxrwxr-x 5 user user 4096 2012-03-28 09:57 jax drwxrwxr-x 2 user user 4096 2012-03-28 09:57 test drwxrwxr-x 5 user user 4096 2012-03-28 09:57 unpacked -rw-rw-r-- 1 user user 11358 2012-03-28 09:57 LICENSE -rw-rw-r-- 1 user user 49592 2012-03-28 09:57 MathJax.js -rw-rw-r-- 1 user user 2146 2012-03-28 09:57 README.md

The size of the folder should be around 26.8MB.

Let's go through the folders.

  • config -- this folder contains combined configuration files such as TeX-AMS-MML_HTMLorMML-full.js
  • docs -- this folder contains the MathJax documentation in html and RestructuredText
  • extensions -- this folder contains the MathJax extensions
  • fonts -- this folder contains the MathJax fonts in multiple formats
  • images -- this folder contains two small images
  • jax -- this folder contains the heart of MathJax, the javascript files processing input and output.
  • test -- this folder contains a series of test files and samples
  • unpacked -- this folder contains the unminified originals of the core MathJax files (config, extensions, jax and of course MathJax.js)

The three files are

  • README.md
  • LICENSE -- a copy of the Apache license
  • MathJax.js -- the core javascript

Shrinking I -- removing files unnecessary for deployment

First, we remove those parts that are not relevant to the functionality of MathJax.

  • docs
  • test
  • unpacked
  • README.md, LICENSE

Without these folders, the functionality of MathJax is not limited in any way -- and we're saving 6.2MB of space right away.

Shrinking II -- things that you probably won't need

There are a few components that you probably won't require in your project.

  • configurations in config

Since you most likely want to write your own configuration anyway, you can remove the content of config. To compare, config folder is 2.8MB in size, whereas a single (minified) configuration file is might be a few hundred bytes.

  • PNG-fonts in fonts/HTML-CSS/TeX/png/

Most likely, your project is using a modern rendering engine such as webkit or gecko. Therefore, the PNG-fonts are not necessary -- at 29,000 files and 12.5MB this is the biggest reduction.

Note If you remove the fonts, you should also include imageFont:null in your configuration to prevent font warning messages if you remove the fonts (cf. the HTML_CSS configuration documentation).

Note The MMLorHTML.js configuration might still be useful, cf. its documentation. If you are working on a web application, the combined configuration files will be more efficient than a regular configuration. If you can use one of these configuration file, keep it. (For local files, e.g. in a smartphone app, there is no real advantage though.)

Note For gecko with local files, you may need the png fonts, because of the same-origin policy that makes files outside the directory of the HTML file be in a different domain. This is one of the few remaining situations requiring image fonts.

Shrinking III -- removing parts your platform doesn't need

Depending on your platform or your project's preference, you can remove some of the functionality of MathJax that your platform does not require.

  • Deleting more fonts.

Most likely, fonts in the Web Open Fonts Format will be sufficient since WOFF is supported by all major rendering engines. The folder fonts/woff contains the MathJax fonts in WOFF. Removing the other font folders will save ~2MB.

If you're more radical, you can force SVG-output (see 'reducing output options' below) -- in this cae you can remove the entire fonts folder, saving 2.4MB.

  • Reducing input options.

Depending on your project it might make sense to reduce the input options. For example, an epub3 reader application such as Readium might restrict the input method to MathML since MathML is part of the epub3 standard. If you're working on something more interactive you might want to allow LaTeX or AsciiMath input. In any case, the savings are jax/input/AsciiMath 31.7kb, jax/input/MathML 65.2kb, jax/input/TeX 49.9kb.

  • Reducing output options.

Similarly, it might make sense to reduce the output options depending on your platform. Essentially there are two choices, HTML-CSS and SVG. Either of them can be used and will save you approximately 1.3MB.

Note NativeMML might be an option if you're using gecko. However, we have to point out that gecko misses some MathML features such as equation numbering and automatic line-breaking in MathML so your content might not display correctly.

To sum up

For Readium, we started at ~26.8MB.

Shrinking I: ~6.2MB
Shrinking II: ~15.3MB
Shrinking II: ~3.8MB

Leaving us at ~1.4MB.

Add a custom sidebar
Clone this wiki locally