search

cylynx / motif.gl

Open source, no-code, network visualization tool for graph analysis and investigation
https://demo.cylynx.io
MIT License
121 stars 10 forks source link

Reduce bundle size #22

Open timlrx opened 3 years ago

timlrx commented 3 years ago

The bundle is more than 0.5MB - yikes! image

G6 and the other Antv packages are more than 60%. I believe lodash is because of a graphin import: https://github.com/antvis/Graphin/blob/master/packages/graphin/src/controller/layout/dataChecker.ts#L2

The full G6 bundle is also due to how Graphin is importing the full G6 library instead of the necessary components.

Let's see if Graphin 2.0 reduces the bloat

CodesAreHonest commented 3 years ago
Screenshot 2020-12-21 at 11 27 14 AM

react-icons contribute to large size of bundle, might need to look for alternatives such as @material-ui/icons or reuse ant design's icon as we already have @ant-design/icons imported.

Unpacked Size of Icons Libraries

Name Unpacked Size
react-icons 36.5 MB
@material-ui/icons 10.2MB
@ant-design/icons 13.7MB
timlrx commented 3 years ago

Hmm, strange that your bundle is quite different from mine. react-icons should have tree-shaking such that only the required icons are imported and not everything. Might want to take a look to see if there's any stray import * around

CodesAreHonest commented 3 years ago

Hmm, strange that your bundle is quite different from mine. react-icons should have tree-shaking such that only the required icons are imported and not everything. Might want to take a look to see if there's any stray import * around

Did not find any stray with import * in the entire codebase. I analyse the bundle size with npm run build and npm run analyze, not sure we are using the same way to analyse the bundle.

timlrx commented 3 years ago

Yes, I re-run it and get the same as my first post. Might be leftovers from the previous builds? Can you try deleting the old dist and re-building?

CodesAreHonest commented 3 years ago

Removed the old dist/, perform rebuild and run bundle analyser, it still the same.

CodesAreHonest commented 3 years ago

Removed the old dist/, perform rebuild and run bundle analyser, it still the same.

Remove node_modules and rebuild with npm install solve the problems. At the same time, I wrongly upload the screenshot from port 8888 and caused misunderstanding.