formsy-react icon indicating copy to clipboard operation
formsy-react copied to clipboard

Optimize bundle size

Open felixmosh opened this issue 5 years ago • 3 comments

Make a research of what can be optimized in order to reduce bundle size.

  1. Make built in validations consumed by import instead of string, this will allow to code split un-used validations. (maybe)

If anyone has more ideas, please share them here :]

felixmosh avatar Aug 19 '20 07:08 felixmosh

So I checked the final bundle, and only 100 of the 5,500 lines are validators. Looking through the bundle, a LOT of it is lodash stuff. I tried switching to lodash-es and was able to knock quite a bit off:

- 156K	dist/formsy-react.cjs.js
+ 116K	dist/formsy-react.cjs.js
- 156K	dist/formsy-react.esm.js
+ 116K	dist/formsy-react.esm.js
- 168K	dist/formsy-react.umd.js
+ 120K	dist/formsy-react.umd.js

We could look at moving these functions into the project if we want to reduce that further. We could also look at uglifying these files, which are full of whitespace, comments, and long variable names. That doesn't really help people who are already doing that to their production files though.

rkuykendall avatar Aug 22 '20 16:08 rkuykendall

WOW, looks like a great savings!

felixmosh avatar Aug 22 '20 17:08 felixmosh

Moving to TSDX reduced the bundle size :] image

felixmosh avatar Aug 30 '20 06:08 felixmosh