Bundle size optimized via different date-fns imports

[jacekk]

TLDR: The bundle size has been reduced from almost 600K into 62K.

---

After clone:

14:32:58 ~/development/github/validatorjs {master}
$ npm run build > /dev/null && ll -h dist
total 604K
drwxrwxr-x 2 jacekk jacekk 4,0K Sep 19 14:33 lang
-rw-rw-r-- 1 jacekk jacekk 598K Sep 19 14:33 validator.js

Changed:

14:34:21 ~/development/github/validatorjs {bundle-size-optimization}
$ git diff
diff --git a/src/rules.js b/src/rules.js
index 0ed897a..ea86d8d 100755
--- a/src/rules.js
+++ b/src/rules.js
@@ -1,4 +1,5 @@
-var dateTools = require('date-fns');
+var isDateValid = require('date-fns/isValid');
+var parseISO = require('date-fns/parseISO');

 function leapYear(year) {
   return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
@@ -16,7 +17,7 @@ function isValidDate(inDate) {
       inDate = inDate.replace(/\./g, '-');
     }
     if (inDate.length === 10) {
-      return dateTools.isValid(dateTools.parseISO(inDate));
+      return isDateValid(parseISO(inDate));
     }
   }

After changes:

14:34:27 ~/development/github/validatorjs {bundle-size-optimization} 
$ npm run build > /dev/null && ll -h dist
total 68K
drwxrwxr-x 2 jacekk jacekk 4,0K Sep 19 14:34 lang
-rw-rw-r-- 1 jacekk jacekk  62K Sep 19 14:34 validator.js

[jacekk]

Nice visualization created with https://github.com/hughsk/disc .

---

Before:

After:

[mikeerickson]

I realize the size difference, that is obvious but I am not sure what you have done to produce the smaller bundle size.

Further, we are working on the next major version and among the many internal changes, we are moving the bundling process to webpack for many reasons, among which are to take advantage of tree shaking to produce optimized bundle size

[jacekk]

@mikeerickson Well, the most important change is the first line of the modified file. I am basically importing only those functions that are used within validatorjs; not the whole date-fns package. I guess tree-shaking is not working out of the box in browserify.

I found such advice pretty common in the context of that package: date-fns/date-fns#771 (comment) so I though it should be used within validatorjs. Additionally, I can see there is a babel plugin for what I've did manually in this very PR: https://github.com/date-fns/babel-plugin-date-fns .

P. S. It would be nice to have the optimization released in the v3 branch :)

[jacekk]

@mikeerickson Anything I can do to merge it? And being released?

[zetoke]

This is awesome!
I want this change as soon as possible as well!
Since it's really reduce size of the bundle!

@mikeerickson can it be merged? Looks like it doesn't have any problems and tests passed.
And seems there are no reasons to wait until next major version to have smaller bundle.
May be I can help somehow to move this thing forward? If there are some problems.

[mikeerickson]

@zetoke I will review this PR and work to get another minor version out this weekend. Thank you for your efforts.

[mikeerickson]

@jacekk I will be addressing this over the weekend. Thank your for your efforts.

[zetoke]

@mikeerickson thank you very much!
And thanks for maintaining the lib and your efforts!

[jacekk]

@mikeerickson Any ETA for a new, smaller release?

[zetoke]

@mikeerickson can we help anyhow to release those 3 lines of code that saves a lot of kilobytes in client bundles?

[mikeerickson]

@zetoke my apologies, I thought I already did this. I will get a new version pushed up this weekend.

[zetoke]

@mikeerickson thank you very much!

[jacekk]

@mikeerickson thank you very much!

@zetoke You thanked, but the latest released version is 3.17.1 from Sep 4th. What I am missing in here? 🤔

[mikeerickson]

@jacekk sorry for delay, I am recovering from flu, but this will get done as soon as I am back to life (hoping tomorrow)