Web開発ブログ

Math.jsでnamed importしたらバンドルサイズ大きくなるためcreateで関数を生成させる

Javascript

作成

2024/01/14

使用したバージョン
mathjs 12.2.1

Webアプリで統計学の計算をしたいのでJavaScriptの数学ライブラリであるMath.jsを使ってみた。

使用したのは行列計算をおこなうmultiply, invと二項係数を計算するcombinationsの3つの関数。

通常通りnamed importでインポートしたところ関数は問題なく使用できた。


import { multiply, inv, combinations } from "mathjs";
multiply(inv(a), b)

バンドルファイルのサイズが大きくなる問題

しかし、このままReactやNext.jsでビルドしてみると生成されたバンドルファイルのサイズが大きくなっていた。

bundle-analyzerでバンドルサイズを可視化してみる。

バンドルサイズ増加

中央の青い部分がMath.jsを使ったことにより増えたファイル。

3つの関数しか使っていないのに約600kbの大きさがある。（Three.jsやKatexも大きいけどこれはどうしようもない・・・）

よく見ると使用していない関数やデータ型もバンドルされているらしい。

解決策

使用している関数とそれに依存するものだけをバンドルしたい場合は、関数名＋'Dependencies'のモジュールをインポートしてcreateで関数を生成させる。


import {  
    multinomialDependencies,
    invDependencies,
    combinationsDependencies,
    create 
} from "mathjs";
const { multiply, inv, combinations } = create({
    multinomialDependencies,
    invDependencies,
    combinationsDependencies
});
multiply(inv(a), b)

これでビルドしてみるとバンドルサイズは次のようになった。
バンドルサイズ増加

右上のファイルの中にこぢんまりと収まっているのがMath.jsのモジュール。
バンドルサイズは約200kbなので3分の1まで削減できた。

Math.jsには他にも便利な機能があるので活用していきたい。