Is there a performance cost if use multiple imports instead one named import

user_3221094 0
Viewed 880

I m wondering if there is a performance cost if we make multiple imports, like so:

import { wrapper } from './components/wrapper';
import { error } from './components/error';
import { products } from './components/products';

In each component folder i have an index.js and export it as named, like so:

export { default as wrapper } from '.wrapper';

Compared to:

Import all the files as named imports from the same source, like so:

import {
   wrapper,
   error,
   products,
 } from './components';

In components folder i have an index where i gather and export all the files, like so:

export { wrapper } from '...';
export { error } from '...';
export { products } from '...';
reactjs ecmascript-6 javascript
2 Answers

According to the ES262 specification, import and export statements just provide information about dependencies between modules to the engine. How the modules are actually loaded in the end is up to the engine (there are a few constraints though). So whether there is actually a difference between importing from the source vs. importing a reexport depends on the environment.

Whatsoever the differences are probably irrelevant. Choose what works best for you.

user_52600240

I'm a fan of that approach. I like to split some components into folder and only expose what I want to the rest of my application. I really don't think that impact the perf on dev. (Obviously, there is absolutely no difference on prod as the whole project is pack in one file)

user_130134140
Related