How can I make a minimal es6 build?

[eulertour]

I'm trying to create an es6 module with relatively minimal capabilities beyond using tex2svg. I tried creating a bundle from this file:

import { mathjax } from "mathjax-full/js/mathjax.js";
import { TeX } from "mathjax-full/js/input/tex.js";
import { SVG } from "mathjax-full/js/output/svg.js";
import { liteAdaptor } from "mathjax-full/js/adaptors/liteAdaptor.js";
import { RegisterHTMLHandler } from "mathjax-full/js/handlers/html.js";

const adaptor = liteAdaptor();
RegisterHTMLHandler(adaptor);

const tex = new TeX({
  packages: ["base", "ams", "mathtools"],
});
const svg = new SVG({ fontCache: "none" });
const html = mathjax.document("", { InputJax: tex, OutputJax: svg });

const tex2svg = (tex) => {
  const node = html.convert(tex);
  return adaptor.innerHTML(node).replaceAll("currentColor", "black");
};

export default tex2svg;

but the resulting build is really large (1.8MB). How can I create a "tree-shaked" build?

[dpvc]

Because you are using the SVG output, this includes the path data for the MathJax TeX fonts, and that is a lot of data. Your size of 1.8MB is about right for that.

As an aside, I see that you have included mathtools in your tex package list, but have not loaded that extension. You oddly need to import mathjax-full/js/input/tex/mathtools/MathtoolsConfiguration.js in order to load that.

You might also consider loading input/tex-base rather than input/tex, which includes the autoload, require, and newcommand extensions. Since you aren't including these in your package, they don't need to be loaded. But since ams is not in input/tex-base (but is in input/tex) you would need to import mathjax-full/js/input/tex/ams/AmsConfiguration.js as well.

[eulertour]

Can you give or point to some guidance on how to load input/tex-base rather than input/tex? I tried replacing the import in the snippet above with each of

import { TeX } from "mathjax-full/es5/input/tex-base.js";
import { TeX } from "mathjax-full/components/src/input/tex-base/tex-base.js";
import { TeX } from "mathjax-full/components/src/input/tex-base/lib/tex-base.js";

with no luck.

Also does that mean that both the packages included and the packages loaded don't have a meaningful effect on the output bundle size? Or just that the SVG path data has much more?

[dpvc]

Can you give or point to some guidance on how to load input/tex-base rather than input/tex?

Sorry, my mistake; I've been writing the documentation for using Components, so had that on my mind, but you are using direct module calls. You are correct to use input/tex in that case. But will need to import the AMS package as well as mathtools.

does that mean that both the packages included and the packages loaded don't have a meaningful effect on the output bundle size?

The SVG paths is a disable chunk of the result. From the size of the tex-chtml.js versus the tex-svg.js combined component, it looks like the webpacked font paths account for about 700 KB, or roughly a third of the size of tex-svg.js.

The TeX packages are small in comparison, so they don't make that much difference. The core infrastructure for MathJax is pretty extensive, and there isn't much that can be left out.