Repository: storybook
Issue: Named Imports are not working properly, Storybook adds everything present the folder to the bundle
Labels: bug,performance issue,cra

Whenever I use named imports, Storybook includes everything in the index file into the build, which eventually increases the bundle size.

main.js
```
module.exports = {
  stories: ["../src/**/*.stories.@(js|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-a11y",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  features: {
    storyStoreV7: true,
  },
  core: {
    disableTelemetry: true,
  },
};

```

My package.json
```
{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.2.5",
    "@dnd-kit/core": "^5.0.1",
    "@dnd-kit/modifiers": "^5.0.0",
    "@dnd-kit/sortable": "^6.0.0",
    "@dnd-kit/utilities": "^3.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.3",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.1.6",
    "highcharts": "^8.1.2",
    "highcharts-react-official": "^3.0.0",
    "i18next": "^21.6.14",
    "i18next-http-backend": "^1.4.0",
    "lodash": "^4.17.20",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.3.2",
    "react-i18next": "^11.16.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-select": "^4.3.1",
    "react-table": "^7.7.0",
    "react-table-sticky": "^1.1.3",
    "react-toastify": "^8.1.0",
    "sass": "^1.33.0",
    "source-map-explorer": "^2.5.2"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "peerDependencies": {
    "babel-loader": "8.1.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-decorators": "^7.12.1",
    "@storybook/addon-a11y": "^6.5.9",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/node-logger": "^6.5.9",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "babel-eslint": "^10.1.0",
    "babel-preset-react-app": "^9.1.2",
    "env-cmd": "^10.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "react-error-overlay": "6.0.9"
  }
}

```



My Folder structure looks like 

```
src/
-images
   index.js
 - svgs/
   - index.js
   ...
   - noGoals/
     - index.js
     - NoGoals.js
     - NoGoals.svg
   - noUsers/
     - index.js
     - NoUsers.js
     - NoUsers.svg
  ...
```

All the main file in svgs folder, looks like this
Ex: images/svgs/noGoals/NoGoals.js

```
import React from "react";
import NoGoalsImg from "./NoGoals.svg";

const NoGoals = (props) => (
  <img src={NoGoalsImg} alt="NoGoalsImg" {...props} />
);

export default NoGoals;
```

and then I am exporting the Component in the index file

in index file
```
export { default } from "./NoGoals";
```

and in the end, I am export all the files like this in the images/svgs/index.js file

in images/svgs/index.js file
```
...
export { default as NoGoals } from "./noGoals";
export { default as NoTemplates } from "./noTemplates";
export { default as NoUsers } from "./noUsers";
...
```

Also, in images/index.js
```
export * from "svgs";
```

I have made a .mdx file and I am importing all one of the images using a named import like this

```
import { NoGoals } from "src/images";
```

After using this, at the build-storybook step, the storybook is including all the images & their content into the build, which increase the build size

You can notice here that all the bundles generated have the same size. ~3.02MB. it's like all my code is present in all my bundles.

<img width="985" alt="image" src="https://user-images.githubusercontent.com/56152437/196093885-431007e1-62c3-4d14-a09c-4a313916948f.png">