search

arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.56k stars 277 forks source link

mathlive bundle size is very big #2270

Closed dkappfire closed 8 months ago

dkappfire commented 8 months ago

I'm using mathlive with React and importing it using import { MathfieldElement } from "mathlive";

The code is being bundled using webpack 5. The size of mathive.min.mjs in the overall minified bundle is around 728 kb.

Is there a way to reduce it, or use only those modules/features that is needed for my project?

MathLive version 0.97.1

arnog commented 8 months ago

Sure. It should be tree shakable, so you can import the source tree directly.

dkappfire commented 8 months ago

tree shaking is enabled in webpack with following optimisation in production mode: optimization: { minimize: true, usedExports: true, splitChunks: { chunks: 'all', cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } },

I also tried "sideEffects": false, in package.json and added "@babel/preset-env", { "modules": false } in babelrc.

These doesn't reduce the mathlive size in the bundle and it is still ~728 kb.

if tree shaking is enabled, then what should be the minimised bundle size of mathlive? Am I missing something in importing mathlive module? It would be great if you could share an example to bundle the minimal size of mathlive.

arnog commented 8 months ago

I don't know how much you can reduce with tree shaking, since that depends on how/what you use from the package. That said, if you use a regular mathfield, the reduction is probably not going to be that much.

In order to do tree shaking, you can't use the version from npm, you have to use the source files. To do this, you need to clone the repo, and import it in your project.

arnog commented 8 months ago

Closing this for now as there are no plans to reduce the default bundle size at this point.