Can I import a small part of mathjs to reduce its size?

[S-W-007]

I just used the part of "fraction" from mathjs for my class project, and only two lines of code as below:

const fr = math.fraction(count);
    return `${fr.toFraction(true)}`;

It works perfectly! Thanks a lot for mathjs!!!

However, my final bundle.js is 642KiB that is much bigger than my instructor's 125KiB.

My instructor used Fraction.js rather than mathjs.

Thus, I guess the huge different size of bundle.js because mathjs is much bigger than Fraction.js?

I would like to know if I can import a small part of mathjs for fraction only? And how to do it?

[josdejong]

Fraction.js is indeed just a small, independent libary of mathjs. If you only need fractions, you may just use the fraction.js library instead of mathjs: https://github.com/infusion/Fraction.js/

You can indeed create a custom bundle of mathjs containing just the parts you need (options are still limited though we're working on that, see #71): http://mathjs.org/docs/custom_bundling.html

[S-W-007]

Actually, I used Fraction.js in the beginning, but it didn't work perfectly. Our instructor just ignored the problem. One of my classmates mentioned about mathjs, so I tried and it solved my problem, and I'm happy with it.

The link of #71 looks different than my code, I'm not sure how to adopt those...

I didimport * as math from "mathjs";

Can I use import fraction from "mathjs"; to import the part of fraction from mathjs?

This is my first project that is combining ES6, webpack, npm, and Babel together, I'm not familiar with those.

Please let me know how to import a single part of mathjs such like fraction.

Thank you very much!!!

[josdejong]

The link of #71 looks different than my code

#71 is a proposal which isn't yet implemented.

As for the custom bundling, please check out the docs and examples on this subject:

docs: http://mathjs.org/docs/custom_bundling.html
example: http://mathjs.org/examples/advanced/custom_loading.js.html

[S-W-007]

I used the following from http://mathjs.org/docs/getting_started.html.
npm install mathjs
import * as math from 'mathjs'

But I can't figure out how to use "ES6 import" one part of mathjs such as "fraction".
I tried...but nothing worked...
//import { fraction } from "mathjs";
//import { mathjs/lib/type/fraction } from "mathjs";
//import { fraction } from "mathjs/lib/type";

To josdejong,
Thank you for the links! But I still don't understand those and how to fix my problem...

I'm not a programmer, and I just started learning JS a month ago, so sorry I don't have much knowledge to understand everything.

[S-W-007]

I would be very appreciated if anyone can show me how to use ES6 import the fraction part of mathjs!

[josdejong]

Please follow my advice above. Read the docs. The example I linked to is exactly what you ask for, thought you could rewrite the require with import. Mathjs has a dependency injection mechanism which you need to understand.

Unless you just need fraction.js itself which would be easier, I guess you need additional functionality which is not available in fraction.js?

[S-W-007]

Copy from the link:
// load the data types you need. Let's say you just want to use fractions
math.import(require('mathjs/lib/type/fraction'))

I tried to use ES6 import...but nothing worked:

import { fraction } from "mathjs";
import { mathjs/lib/type/fraction } from "mathjs";
import { fraction } from "mathjs/lib/type";

I guess I need to learn more about ES6 so that I will be able to figure out how to ES6 import correctly.

fraction.js caused some unknown errors, and I couldn't get the result as I need. So I switch to mathjs.
I just want to reduce its size by importing only fraction part from mathjs.

Anyway, thank you again!

[josdejong]

It may be worth trying to figure out what goes wrong with fraction.js, since that's used under the hood by mathjs. So if you only need fractions it's overkill to use mathjs.

The transition period towards ES6 import/export that JS and node.js are in right now can be really confusing. A require statement like:

const foo = require('foo')

is equivalent with:

import * as foo from 'foo'

The line:

math.import(require('mathjs/lib/type/fraction'))

Should be come something like (not tested):

import * as fraction from 'mathjs/lib/type/fraction'
math.import(fraction)

[S-W-007]

I agree that ES6 import is very confusing!!!
Even our instructor couldn't figure out the problem with fraction.js, so I don't think I can do it.

import * as fraction from 'mathjs/lib/type/fraction'
math.import(fraction)

I just tried above code, but didn't work.

I think I'd better just move on, at least, I got the correct results by using mathjs (but not fraction.js).
I will review my project later...after I complete another ES6 class.

Thank you very much, Sir, for trying to help me!!!

[josdejong]

👍