Performance Improvement Using Named Imports

In a JavaScript or Node.js project, we can import modules using different ways. Here are two examples which we discuss today.

// Default import
import Lodash from "lodash";
Lodash.capitalize("hello");

// Named import
import { capitalize } from "lodash";
capitalize("hello");

Lodash is just an example used to demonstrate the performance. We all know that lodash contains several utility methods.

Both the types of import works. But the performance of both techniques vary based on the bundler we use. Different bundlers use the different ways for tree shaking.

Tree shaking is the process taken by bundlers to find out what all methods or modules need to be included in the output bundle.

It is always advised to use named imports. It makes sure that only the required modules are loaded to the output bundle.