UNPKG

4.07 kBMarkdownView Raw
1# Custom bundling
2
3Math.js is a large library containing many data types and functions.
4It is well possible that you only need a small portion of the library.
5Math.js allows for picking just the functions and data types you need.
6This gives faster load times and smaller browser bundles. Math.js uses
7ES modules, and creating small bundles using tree-shaking works out of
8the box when using Webpack for example.
9
10This page describes:
11
12- How to use just a few functions for faster load times and smaller bundles.
13- How to use light-weight, number only implementations of functions.
14- What to expect from bundle sizes when using tree-shaking.
15
16## Using just a few functions
17
18Using the function `create`, a mathjs instance can be created.
19The `all` object contains all functionality available in mathjs,
20and a mathjs instance containing everything can be created like:
21
22```js
23import { create, all } from 'mathjs'
24
25const math = create(all)
26```
27
28To create an instance with just a few functions, you have to pass the
29factory functions of the functions you need, and all their dependencies.
30For example the function `add` depends on the functions `addScalar`,
31`equalScalar`, classes `DenseMatrix` and `SparseMatrix`, and more.
32Because it is hard to figure out what the dependencies of a function are,
33and the dependencies of the dependencies, mathjs provides ready made
34collections of all dependencies for every function. For example all
35factory functions of function `add` and its dependencies are available
36as `addDependencies`.
37
38Here is a full example of loading just a few functions in a mathjs instance:
39
40```js
41// file: custom_loading.js
42
43import {
44 create,
45 fractionDependencies,
46 addDependencies,
47 divideDependencies,
48 formatDependencies
49} from 'mathjs'
50
51const config = {
52 // optionally, you can specify configuration
53}
54
55// Create just the functions we need
56const { fraction, add, divide, format } = create({
57 fractionDependencies,
58 addDependencies,
59 divideDependencies,
60 formatDependencies
61}, config)
62
63// Use the created functions
64const a = fraction(1, 3)
65const b = fraction(3, 7)
66const c = add(a, b)
67const d = divide(a, b)
68console.log('c =', format(c)) // outputs "c = 16/21"
69console.log('d =', format(d)) // outputs "d = 7/9"
70```
71
72This example can be bundled using for example Webpack:
73
74```
75npx webpack custom_loading.js -o custom_loading.bundle.js --mode=production
76```
77
78Only the used parts of mathjs will be bundled thanks to tree-shaking.
79
80
81## Numbers only
82
83The functions of mathjs support multiple data types out of the box, like
84numbers, bignumbers, complex numbers, units, and matrices. Quite commonly however,
85only support for numbers is needed and the other data-types are overkill.
86
87To accomodate for this use case of only numbers only, mathjs offers light-weight,
88number only implementations of all relevant functions. These are available by
89importing from `'mathjs/number'` instead of `'mathjs'`:
90
91```js
92// use light-weight, numbers only implementations of functions
93import { create, all } from 'mathjs/number'
94
95const math = create(all)
96console.log(add(2, 3)) // 5
97```
98
99## Bundle size
100
101When using just a few functions of mathjs instead of the whole library,
102you may expect the size of the bundle to be just a small fraction of the
103complete library. However, to create the function `add` supporting all data
104types, all these data types must be included: Unit, BigNumber, Complex,
105DenseMatrix, SparseMatrix, etc. A rough idea of the size of different parts of
106mathjs:
107
108- About 5% is coming from core functionality like `create`, `import`, `factory`,
109 `typed-function`, etc.
110- About 30% of the bundle size comes from the data classes `Complex`, `BigNumber`, `Fraction`, `Unit`, `SparseMatrix`, `DenseMatrix`.
111- About 25% of the bundle size comes from the expression parser.
112 Half of this comes from the embedded docs.
113- About 40% comes from the about 200 built-in functions and some constants.
114
115To get a better insight in what is in your JavaScript bundle, you can use
116a tool like [source-map-explorer](https://github.com/danvk/source-map-explorer).