A follow up to replacing Redux with React Components, I'm using the ES module version of Lodash to leverage tree shaking with Parcel.
Lodash is the Swiss army knife of Javascript, but being so useful makes it huge. Analyzing our bundle with Bundle Buddy reveals Lodash is responsible for 70 KB of the bundle. Not the largest chunk, but one we can easily fix: it is not being tree shaken.
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: groupBy, keyBy, isEqual, sortBy, times, uniq, uniqBy and 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 package.json.
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.