A very often overlooked aspect for developers is how they import their libraries into their project. Importing libraries incorrectly will rapidly increase your bundle size, increase your build time and will make the user eventually wait more time for the page to load.

It’s time to solve these problems by correctly importing our libraries.

We will take as an example the lodash library which is a utility library that has dozens of functions to help with arrays, objects, strings and much more.

Lets start with a new react project, I’ve used create-react-app to create a new project and added webpack-bundle-analyzer in order to demonstrate the different bundle sizes we get with each different import.

Now lets look at our project using the webpack-bundle-analyzer to see the libraries sizes:

For those of you who are unfamiliar with webpack-bundle-analyzer it helps visualize the size of webpack output files by showing the size each package / library.

As you can see a clean project starts with a bundle size of 126KB (Parsed Size), the current configuration of webpack will automatically chunk the bundle into separate chunks but the main bundle is the one in the image.

Now that we have the starter project we can install lodash and we can now compare three ways to import lodash into our project:

1. Importing the entire lodash library:

import _ from ‘lodash’

This way imports the whole library into the project therefore it will lead to the largest bundle size.

As you can see lodash adds 71KB to our bundle size and it leads to a total of 197KB.

2. Importing using curly brackets:

import {map, uniq} from ‘lodash’

It might surprise you but this way will also import the whole library and only then will destructure the functions you specify. Therefore it will also lead to the largest bundle size of 197KB.

3. Importing specific methods:

import map from ‘lodash/map’
import uniq from ‘lodash/uniq’

This is the most efficient way to import when we take into consideration the bundle size, it will import only the specified functions.

By importing specifically we only imported 8KB! which is only the methods that we need, instead of 71KB which is a significant difference.

Now that we’ve seen the difference when importing specific methods one at a time we can greatly reduce our final bundle size and improve our overall performance.

THE DOWNSIDE: Importing each method separately overtime will become hard to maintain. When a new developer joins the team and he is not aware of how to correctly import packages this bad habit could quickly slip back into the project.

Course by Sagi Liba,
Author of this blog

Maintenance Considerations

To mitigate maintenance issues and avoid importing the whole bundle we should create an object that will hold our specific imports.

BEST PRACTICE: wrap 3rd-party libraries in a new class / function and allow access to the methods you decide. This will allow for more control over the wrapped library, if you will decide to change the library one day you can easily replace it and only change the inner implementation of publicly available methods.

Lodash has over a hundred different utility functions but many projects will use far less. By importing each of these functions inside our selectedLodashFunctions object we easily get access to our most used functions without importing them over and over again throughout the project.

Here we don’t actually need to wrap lodash with a wrapper, an object will be enough for this use case.

import map from "lodash/map";
import filter from "lodash/filter";
import reduce from "lodash/reduce";

// You can pick a shorter name for your own convenience.
export const selectedLodashFunctions = {
  map,
  filter,
  reduce,
};

When we need to use a new function from lodash we can just import it directly and it add to our selectedLodashFunctions object without leaving single usage imports laying around inside our project.

Lodash was only used as an example of how to correctly import methods to your project, but it will work the same way for each library that supports individual imports.

Last Note: There are webpack plugins that rewrite lodash imports automatically and they actually might even lower the final lodash method sizes by replacing them with more effcient implemenation. You should take into consideration that depending on your projects size it might increase your build time.

you can read more about it at:

• Babel-plugin-lodash
• lodash-webpack-plugin

Happy Coding!