ES6 导入的性能

Question

在React Bootstrap docs 中，建议从单个分发文件而不是从较大的分发文件单独导入模块。

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

为什么第二种方法不太理想？

Answer 1

正如那个链接所说：

您应该导入单个组件，例如：react-bootstrap/Button，而不是整个库。这样做只会引入您使用的特定组件，这可以显着减少您最终发送给客户端的代码量。

如果您从react-bootstrap 导入，客户端必须下载react-bootstrap 中的所有内容。这最终可能会成为相当大的代码块。相反，如果您从react-bootstrap/Button 导入，则需要下载的全部是按钮 - 没有任何多余的内容。

比较文件：

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js

到

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/index.js

如您所见，从 Button 导入需要一些导入：

import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

import { useBootstrapPrefix } from './ThemeProvider';
import SafeAnchor from './SafeAnchor';

但是从index.js 导入需要非常大量的导入，准确地说是77。

export Accordion from './Accordion';
export AccordionToggle, { useAccordionToggle } from './AccordionToggle';
export AccordionCollapse from './AccordionCollapse';
export Alert from './Alert';
export Badge from './Badge';
// and 72 more

如果您从index 导入而不是从Button 导入，那么您正在下载大量不需要的代码，没有任何理由。