search

formsy / formsy-react

A form input builder and validator for React JS
MIT License
763 stars 126 forks source link

Optimize bundle size #546

Open felixmosh opened 4 years ago

felixmosh commented 4 years ago

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 :]

rkuykendall commented 4 years ago

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.

felixmosh commented 4 years ago

WOW, looks like a great savings!

felixmosh commented 4 years ago

Moving to TSDX reduced the bundle size :] image