Exporting Multiple Components From An index.js File in react and its side effects

Question

I wanna know if there is any side effects of exporting multiple components from an index.js file in an app created using vite/react(vite) or create-next-app(webpack) so that while importing, i can import multiple components in a single bracket like this

import { Button, CustomModal, Input } from '../ui';

so, i wanna know if i only import one component in a file. Does it import all of other components as well in the final build as they are all in a single object?, or if not, does it create an instance of them which consumes memory? or modern bundlers like vite or webpack can handle it on their own?

Right now i'm exporting components like this from components/ui/index.js:

import Button from './Button';
import BadgeRounded from './BadgeRounded';
import DropDown from './Dropdown';
import ToggleSwitch from './ToggleSwitch';
import Input from './Input';
import CustomTable from './CustomTable';
import RoundedInput from './RoundedInput';
import CustomModal from './Modal';
import GoBackWithText from './GoBackWithText';
import ActionButton from './ActionButton';
import CustomDatePicker from './DatePicker';
import CustomTimePicker from './TimePicker';
import RoundedCheckWithLabel from './RoundedCheckWithLabel';
import PicturesWall from './UploadPicturesWall';
import CheckWithLabel from './CheckWithLabel';
import TextArea from './TextArea';
import StarRating from './FiveStarRating';

export {
  StarRating,
  TextArea,
  CheckWithLabel,
  PicturesWall,
  RoundedCheckWithLabel,
  CustomTimePicker,
  CustomDatePicker,
  ActionButton,
  GoBackWithText,
  RoundedInput,
  CustomTable,
  Input,
  Button,
  BadgeRounded,
  DropDown,
  ToggleSwitch,
  CustomModal
};

I tried searching in vite's and webpack's documentation but i did not get the proper answer.

Answer 1

If you want your index.js to be tree-shakable, for that you can use agadoo to test it. Launch it on your index.js, by preferences after building it. If it is, nice ! Only the imported modules will be taken in the final bundle. If it's not, that mean all the modules in your index.js will be bundled in your code.

If it's not, you need to find the cause, it can be due to initialization in const or using external library outside their intended scope. Sadly agadoo doesn't tell you the exact cause.