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";
|
|
26 Dec 2, 2022
14.8k Jan 4, 2023
9.5k Dec 30, 2022
3 Oct 11, 2021
2 Jul 19, 2022
24.5k Jan 7, 2023
1.4k Jan 4, 2023
9 Jun 30, 2022
6 Aug 12, 2022
11 Dec 31, 2022
19.7k Jan 3, 2023
27 Apr 12, 2022
5 Mar 11, 2022
93 Jan 8, 2023
22 Dec 9, 2022
21.2k Dec 30, 2022
20.3k Jan 3, 2023
181 Dec 22, 2022