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

z0qdvdin  于 5个月前  发布在  Webpack
关注(0)|答案(1)|浏览(131)

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

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

字符串
所以,我想知道我是否只导入一个文件中的组件。它是否在最终构建时也导入所有其他组件,因为它们都在一个对象中?或者如果不是,它是否创建了一个消耗内存的示例?或者像vite或webpack这样的现代插件可以自己处理它?
现在我从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
};


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

knsnq2tg

knsnq2tg1#

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

相关问题