webpack 在react中从index.js文件导出多个组件及其副作用

z0qdvdin  于 2024-01-08  发布在  Webpack
关注(0)|答案(1)|浏览(277)

我想知道在使用vite/react(vite)或webpack-next-app(webpack)创建的应用程序中,从index.js文件导出多个组件是否有任何副作用,以便在导入时,我可以像这样在单个括号中导入多个组件

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

字符串
所以,我想知道我是否只导入一个文件中的组件。它是否在最终构建时也导入所有其他组件,因为它们都在一个对象中?或者如果不是,它是否创建了一个消耗内存的示例?或者像vite或webpack这样的现代插件可以自己处理它?
现在我从components/ui/index.js导出这样的组件:

  1. import Button from './Button';
  2. import BadgeRounded from './BadgeRounded';
  3. import DropDown from './Dropdown';
  4. import ToggleSwitch from './ToggleSwitch';
  5. import Input from './Input';
  6. import CustomTable from './CustomTable';
  7. import RoundedInput from './RoundedInput';
  8. import CustomModal from './Modal';
  9. import GoBackWithText from './GoBackWithText';
  10. import ActionButton from './ActionButton';
  11. import CustomDatePicker from './DatePicker';
  12. import CustomTimePicker from './TimePicker';
  13. import RoundedCheckWithLabel from './RoundedCheckWithLabel';
  14. import PicturesWall from './UploadPicturesWall';
  15. import CheckWithLabel from './CheckWithLabel';
  16. import TextArea from './TextArea';
  17. import StarRating from './FiveStarRating';
  18. export {
  19. StarRating,
  20. TextArea,
  21. CheckWithLabel,
  22. PicturesWall,
  23. RoundedCheckWithLabel,
  24. CustomTimePicker,
  25. CustomDatePicker,
  26. ActionButton,
  27. GoBackWithText,
  28. RoundedInput,
  29. CustomTable,
  30. Input,
  31. Button,
  32. BadgeRounded,
  33. DropDown,
  34. ToggleSwitch,
  35. CustomModal
  36. };


我试着在vite和webpack的文档中搜索,但我没有得到正确的答案。

knsnq2tg

knsnq2tg1#

如果你想让你的index.js可以进行树抖动,你可以使用agadoo来测试它。在你的index.js上启动它,在构建它之后通过偏好设置。如果是这样,很好!只有导入的模块会被带到最终的bundle中。如果不是,这意味着你的index.js中的所有模块都会被捆绑在你的代码中。
如果不是,你需要找到原因,这可能是由于const中的初始化或使用外部库超出其预期范围。遗憾的是agadoo没有告诉你确切的原因。

相关问题