从 react-bootstrap 导入多个组件的最佳实践？

Question

出于性能原因，React-Bootstrap 文档建议导入单个组件而不是整个库。所以：

import Button from 'react-bootstrap/Button';

而不是

import { Button } from 'react-bootstrap';

我的问题是导入大量组件时是否有限制？即

import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';

相对于：

import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';

是否仍然有这样的性能提升，最好使用单独的 import 语句，或者是否有其他人遵循的截止点，其中超过一定数量的组件被包含在一行中而不是多个？

Answer 1

只使用命名导入和 tree shake 未使用的代码。例如 Create-React-App tree shaking 是自动配置的。然后使用

import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';

最后和

一样

import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';

直接回答您的问题：是的，摆脱不使用的代码总是更好。即使您使用 react-bootstrap 中的十个组件 - 这个库还有很多，我无法想象您会使用其中 70-80% 的单个组件。

从 react-bootstrap 导入多个组件的最佳实践？

Best practices for importing multiple components from react-bootstrap?

react-bootstrap