Reducing Bundle size of a Frontend application by optimizing Lodash imports

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 = require('lodash/get');

This imports only the needed 
get
 code without the full library.

By analyzing usage and optimizing imports in this way, we were able to significantly reduce the size of lodash in our bundle. What seemed like minor changes made a meaningful impact on bundle size. With some inspection of imports, libraries like Lodash can be used efficiently without the overhead of unused code. This optimization is especially important as bundle size directly impacts performance and user experience.

Reference :

https://lodash.com/per-method-packages