Summary
I really love this library, but the bundle size is to huge !!! Even I only want to use VictoryLine
, I need to import the full victory
, victory-chart
and victory-core
library + lodash
.
Here are some things to do in order to reduce bundle size, for victory
, victory-chart
and victory-core
. I can do a PR for it
- [ ] : Only import used
lodash
module
Replace
import { xxx, yyy } from "lodash";
by
import xxx from "lodash/xxx";
import yyy from "lodash/yyy";
- [ ] : Only import used
victory-core
module
Replace
import { PropTypes as CustomPropTypes, Helpers } from "victory-core";
by
import CustomPropTypes from "victory-core/lib/victory-util/prop-types";
import Helpers from "victory-core/lib/victory-util/helpers";
- [ ] : Add
index.js
when relevant
For example, add an index.js
file in victory-core/src/victory-transition
so
import VictoryTransition from "victory-core/lib/victory-transition/victory-transition";
can by replaced by
import VictoryTransition from "victory-core/lib/victory-transition";
Details
I'm trying victory
with this sample
import { VictoryLine } from 'victory-chart'
<VictoryLine
data={[
{month: "September", profit: 35000, loss: 2000},
{month: "October", profit: 42000, loss: 8000},
{month: "November", profit: 55000, loss: 5000}
]}
x="month"
y={(datum) => datum.profit - datum.loss}
/>
But the bundle is way to big !!! I used webpack-bundle-analyser to find why.
Here is the graph I have with the current code
As you can see, even if I am only using VictoryLine
, the full victory-core
, victory-chart
and lodash
are included in my bundle
So I tried to directly install victory-core
and victory-chart
and change my code sample to
import VictoryLine from 'victory-chart/lib/components/victory-line/victory-line'
...
Using this method I reduced the bundle size and only include VictoryLine
from victory-chart
in my bundle. Here is the new graph I get
Problem :
lodash
is still fully included. You are using (line 1)
import { partialRight, without } from "lodash";
(which include the whole lodash
library) but you only need
import partialRight from "lodash/partialRight";
import without from "lodash/without";
victory-core
is still fully included. You are using (line 4-8)
import {
PropTypes as CustomPropTypes, Helpers, VictoryTransition, VictoryLabel, addEvents,
VictoryContainer, VictoryTheme, DefaultTransitions, Curve, VictoryClipContainer,
Data, Domain
} from "victory-core";
(which include the whole victory-core
library) but you only need
import LineHelpers from "./helper-methods";
import CustomPropTypes from "victory-core/lib/victory-util/prop-types";
import Helpers from "victory-core/lib/victory-util/helpers";
import VictoryTransition from "victory-core/lib/victory-transition/victory-transition";
import VictoryLabel from "victory-core/lib/victory-label/victory-label";
import addEvents from "victory-core/lib/victory-util/add-events";
import VictoryContainer from "victory-core/lib/victory-container/victory-container";
import VictoryTheme from "victory-core/lib/victory-theme/victory-theme";
import DefaultTransitions from "victory-core/lib/victory-util/default-transitions";
import Curve from "victory-core/lib/victory-primitives/curve";
import VictoryClipContainer from "victory-core/lib/victory-clip-container/victory-clip-container";
import Data from "victory-core/lib/victory-util/data";
import Domain from "victory-core/lib/victory-util/domain";