我想知道在使用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的文档中搜索,但我没有得到正确的答案。
1条答案
按热度按时间knsnq2tg1#
如果你想让你的
index.js
可以进行树抖动,你可以使用agadoo来测试它。在你的index.js
上启动它,在构建它之后通过偏好设置。如果是这样,很好!只有导入的模块会被带到最终的bundle中。如果不是,这意味着你的index.js
中的所有模块都会被捆绑在你的代码中。如果不是,你需要找到原因,这可能是由于
const
中的初始化或使用外部库超出其预期范围。遗憾的是agadoo
没有告诉你确切的原因。