CODEWITHSUNDEEP
reactjswebpackbabeljs
noumanniazi
noumanniazi

Reputation: 746

Does React build size change due to named and default imports

I am new to React development and have been using named and default imports. I need to know whether importing a default export and using its named exports by referencing it such as

import * as R from 'ramda';
...
R.map(...),
R.propEq(..,..),
R.equals(..,..),
R.pipe(,,,)

or importing its named exports such as 

import {map, propEq, equals, pipe} from 'ramda';
...
map(...),
propEq(..,..),
equals(..,..),
pipe(,,,)

creates a difference in build size? Does compiler builds with complete ramda lib in first case and only the required functions in second? Is it intelligent enough and checks which of the functions are used in the code and only keeps those in the build?

I have tested it on sample of 2-3 named and default export functions of ramda and build size is same. Will it scale the same way?

Upvotes: 2

Views: 750

Answers (1)

Fotis Nalbadis
Fotis Nalbadis

Reputation: 162

This is a webpack question as far as i know and not a Reactjs.

The quick answer for most libraries is that it does not make a difference on bundle size, but it is good practice not to load the whole library every time you need just one part.

Also you could do a research about particular libraries that interest you. For example for lodash with adjustments you can do:

import get from "lodash/get"

and this will result loading only this module and ultimately smaller bundle size. Same solutions exist for momentjs, etc and many other libraries that are probably big and you end up not using the whole thing.

You could tag this question with webpack to get a more educated and informed answer

Upvotes: 4

Related Questions