Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

Question

Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

When it comes to importing functions from lodash, I have been advised by my coworker that it is more efficient to import each function individually rather than as a group.

The current method of importing:

import {fn1, fn2, fn3} from 'lodash';

The preferred method suggested:

import fn1 from 'lodash/fn1';
import fn2 from 'lodash/fn2';
import fn3 from 'lodash/fn3';

According to her explanation, the latter approach results in less code being imported since it does not bring in the entire lodash library.

Can you confirm if this reasoning is accurate?

javascript npm webpack lodash

Answer 1

Answer №1

The preferred method you should use is known as tree shaking:

Tree-shaking involves the elimination of unused code in the bundling process.

To properly implement tree shaking, follow this example:

import foo from 'lodash/foo' // <-- only import `foo`

The following will not result in tree shaking:

import { foo } from 'lodash'

Nor will this:

import _ from 'lodash'

This syntax was introduced in Lodash v4.

For more information on tree shaking, you can visit this link

Answer 2

The preferred method you should use is known as tree shaking:

Tree-shaking involves the elimination of unused code in the bundling process.

To properly implement tree shaking, follow this example:

import foo from 'lodash/foo' // <-- only import `foo`

The following will not result in tree shaking:

import { foo } from 'lodash'

Nor will this:

import _ from 'lodash'

This syntax was introduced in Lodash v4.

For more information on tree shaking, you can visit this link

Answer 3

Answer №2

After researching various sources, it appears that when you use import x from y;, you are importing the default export from the module y and assigning it to the variable x in your file.

It seems that your preferred approach involves importing the default export multiple times, each time with a different variable name...

But is this method actually effective in a production environment?

Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://medium.com/javascript-in-plain-english/javascript-modules-for-beginners-56939088f7d9

Answer 4

After researching various sources, it appears that when you use import x from y;, you are importing the default export from the module y and assigning it to the variable x in your file.

It seems that your preferred approach involves importing the default export multiple times, each time with a different variable name...

But is this method actually effective in a production environment?

Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://medium.com/javascript-in-plain-english/javascript-modules-for-beginners-56939088f7d9

Answer 5

Answer №3

I personally believe that using the syntax

import {fn1, fn2, fn3} from 'lodash';

is the correct approach for importing different exports from a module. However, I think an even better way to structure this import would be as follows:

    import {
      fn1, 
      fn2, 
      fn3
    } from 'lodash';

This way of importing makes it more convenient to remove any specific function if it is no longer needed.

Answer 6

I personally believe that using the syntax

import {fn1, fn2, fn3} from 'lodash';

is the correct approach for importing different exports from a module. However, I think an even better way to structure this import would be as follows:

    import {
      fn1, 
      fn2, 
      fn3
    } from 'lodash';

This way of importing makes it more convenient to remove any specific function if it is no longer needed.

Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

Answer №1

Answer №2

Answer №3

Similar questions

The focusable attribute in SVG is malfunctioning

where is the yarn global registry located?

Encountering an issue with Angular virtual scrolling: ViewDestroyedError arises when trying to utilize a destroyed view during detectChanges operation

Leverage a function in an external JavaScript file within Angular 4

Having trouble displaying Json data on an HTML page?

When the button is clicked, I desire to reveal the background color of a specific div

Using an Ajax Post Call to send FormData leads to a Get request instead

Getting a null value for active user after completing the sign-in process

"Implementing a JavaScript function to dynamically add multiple div elements to a

Unable to make colors appear in HTML5 canvas using .fillStyle

Enhancing React Flow to provide updated selection and hover functionality

The issue arises due to conflicting indent configurations between eslint and @typescript-eslint/indent

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

Toggle the opening and closing of React components with a map function using onclick

`Why setRequestHeader is essential for Ajax and XMLHttpRequest`

Browser-sync is unable to retrieve an error

Enhancing functionality in Javascript by employing prototype descriptor for adding methods

Cannon.JS ensures that walls are impenetrable

Leveraging CamanJS for canvas filtering

The JavaScript function is designed to only accept whole numbers as input