A follow up to replacing Redux with React Components, I'm using the ES module version of Lodash to leverage tree shaking with Parcel.
Tree shaking is the concept of removing dead code (that is, code paths that are never accessed) from the final bundle. We use only 8 functions from Lodash, namely:
xor. Lodash has hundreds of functions and we don't need everything.
There are several manners of doing that, my chosen one is replacing with lodash-es and leaving dead code elimination to the bundler. You can also use babel-plugin-lodash but I didn't find that as easy to set up.
I then ran
sed -i -e "s/'lodash'/'lodash-es'/" src/**.ts* to replace all imports, after replacing the package in
This reduced the JS bundle by over 50 KB, with
lodash-es now using only 19 KB!
Cover image by Johann Siemens (see in Unsplash).
Top comments (1)
Nice tip on lodash-es! Sadly, bundle-buddy.com seems a bit confusing and outdated (besides the lack of privacy). I'm checking other tools (by the same name lol) that can execute locally - even source-map-explorer can be helpful, albeight ugly.