We recently analyzed the bundle size of our frontend application and noticed the Lodash package was taking up a significant amount of space. Lodash offers many useful utilities for common tasks like filtering, sorting, mapping and manipulating data. However, importing the entire library increases bundle size considerably. We decided to optimize our usage of Lodash to reduce this bundle size. Upon inspection, we found we were importing the whole library using imports like const lodash = require('lodash'); and const _ = require('lodash'); While convenient, this brings in all of Lodash's functions regardless of what we actually use. A better approach is to import only the specific functions needed. For example, using const merge = require('lodash/merge'); and const cloneDeep = require('lodash/cloneDeep'); We import just those individual methods rather than the entire library. This avoids unnecessary code and reduces bundle size. We also noticed imports like const { get } = require('lodash'); that destructure the get function. However, this still imports the whole Lodash library first before extracting the function. For even better optimization, we can import directly from the sub-module like const get ...Read more
Home/lodash