Bundling results in massive file

[ironcamel]

I attempted to bundle up mathjax-react using rollup to be able to use it in a browser app and the resulting file ends up being 2 Mb. This is the file I am rolling up:

import { MathComponent } from 'mathjax-react';
export default MathComponent;

This is my rollup config:

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

const config = {
  input: 'src/Foo.js',
  output: [
    {
      file: 'public/javascripts/bundle.js',
      format: 'iife',
      name: 'MathComponent',
      globals: { react: 'React' }
    },
  ],
  plugins: [
    commonjs(),
    resolve()
  ],
  external: ['react'],
};

export default config;

Am I doing something wrong, or is it expected to have a 2Mb bundle? Is there a better way to bundle this up so that I can use it in the browser?

I did the same thing with the similar react-mathjax package and that resulted in a bundled file that was just 18K, so I am using that for now.

[CharlieMcVicker]

I will take a look at this issue this week. Thank you for bringing this to my attention.

The library relies on mathjax-full which is fairly large. But we don't use all of its functionality. It seems like there is an issue with tree shaking going on.

[dpvc]

Note that because mathajx-react imports MathJax modules for TeX input and SVG output, the complete set of dependencies for those will be included in the rolled-up file. That does amount to about 1.8MB (the SVG output module includes all the paths of all the characters, which takes up considerable space).

The reason react-mathjax is small is because it doesn't package MathJax (it uses MathJax v2 which could not be bundled like v3 can), so it loaded MathJax externally. That still caused a large download, but it was just not visible in the rolled-up file, as it was not included there. That would cause a number of network downloads in order to get all the pieces that MathJax needed that were not part of the initial asset file.